I created two dropdowns, a dadand a son that are populated based on two arrays that, hypothetically, can't be changed. When you choose a dad with the code x it generates the son's drop-down with the options containing the code x.var dadArray = [  [1, 'Dad1'],  [2, 'Dad2'],  [3, 'Dad3']];var sonArray = [  [1, 'Son1'],  [1, 'Son2'],  [3, 'Son3'],  [2, 'Son4']];function sortArray(dad, dadID) {  for (var i = 0; i < dad.length; i++) {    $(dadID).html($(dadID).html() + '<option value=' + dad[i][0] + '>' + dad[i][1] + '</option>');  }  var selDad = $('#dadDrop option:selected').val();  for (i = 0; i < sonArray.length; i++) {    if (sonArray[i][0] == selDad) {      $('#sonDrop').html($('#sonDrop').html() + '<option value=' + sonArray[i][0] + '>' + sonArray[i][1] + '</option>');    }  }}sortArray(dadArray, '#dadDrop');$(#dadDrop).change(function() {  $('#sonDrop').html('');  var selDad = $('#dadDrop option:selected').val();  for (var i = 0; i < sonArray.length; i++) {    if (sonArray[i][0] == selDad) {      $('#sonDrop').html($('#sonDrop').html() + '<option value=' + sonArray[i][0] + '>' + sonArray[i][1] + '</option>');    }  }});<script src=https://code.jquery.com/jquery-2.1.4.min.js></script><select id=dadDrop></select><br /><br /><select id=sonDrop></select><br /><br />I made it using jQuery, but it looks huge (Probably because I'm still a newbie to JS and its libraries with amazing features). Is there a different logic that requires fewer lines? of course there is, but may you share it with me?
Populating dropdowns that are based on others
javascript;performance;jquery
Your data doesn't mean much. I would suggest an array of objects so that the data will have meaning. Also, I would not recommend naming your variables based on data type. JS doesn't have strict types. You can easily assign anything to the variable. This means your dadArray may not be an array at some point.var dads = [  {id: 1, name: 'Dad1'},  {id: 2, name: 'Dad2'},];var sons = [  {id: 1, dadId: 1, name: 'Son1'},  {id: 2, dadId: 1, name: 'Son2'},  {id: 3, dadId: 3, name: 'Son3'},  {id: 4, dadId: 2, name: 'Son4'},];So your operation involves:Populating the dads dropdown.On dad selection, populate the sons dropdown depending on the dad.I notice that in your code there's duplicates. Let's split them up into functions to be reusable. Based on the operations, you should have something like:function populateDads(dads){...}function populateSons(sons){...}Let's start first with the dads. I would discourage using .html(). While it does work, what happens is that jQuery does not clean up after itself. Handlers that are assigned to elements that are replaced will linger on your page. Suggesting you use .empty() if your current set is the parent of the elements to remove or .remove() if your current set are the elements to remove.$('select').empty(); // Empties the optionsAs far as I know, jQuery's .val() should be able to extract the value from a <select>. No need to find the selected <option> from the <select>. var selDad = $('#dadDrop').val();If both your select boxes are static throughout the life of the page, you can simply just store their jQuery object in a variable. That way, you won't be querying the DOM every now and then.var dadSelect = $('#dadDrop');var sonSelect = $('#sonDrop');There's also a neater way to construct elements in jQuery. It goes like:$('<tagName />', { attr: value });Running with all these, the code should look like:var dads = [  {id: 1, name: 'Dad1'},  {id: 2, name: 'Dad2'},  {id: 3, name: 'Dad3'},];var sons = [  {id: 1, dadId: 1, name: 'Son1'},  {id: 2, dadId: 1, name: 'Son2'},  {id: 3, dadId: 3, name: 'Son3'},  {id: 4, dadId: 2, name: 'Son4'},];var dadSelect = $('#dadDrop');var sonSelect = $('#sonDrop');function populateDads(dads){  dadSelect.empty();  $.each(dads, function(index, dad){    $('<option />', {value: dad.id}).text(dad.name).appendTo(dadSelect);  });}function populateSons(sons){  sonSelect.empty();  $.each(sons, function(index, son){    $('<option />', {value: son.id}).text(son.name).appendTo(sonSelect);  });}dadSelect.on('change', function(){  // .val() returns a string. Coerce the value to a number using the  // prefix +. Acts like parseFloat most of the time.  var selectedDad = +dadSelect.val();  var dadSons = sons.filter(function(son){ return son.dadId === selectedDad; });  populateSons(dadSons);});populateDads(dads);// Trigger change for first load to prepopulate childrendadSelect.trigger('change');<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script><select id=dadDrop></select><select id=sonDrop></select>