Returning an Object from an Event Handler, when data can not be Structured to a different format

Question

What I want is that when I select a category in dropdown Type, my second dropdown Item should get dynamically updated, on the change event of Type.

If I will be able to access the Array I have created inside the change event, I will be able to get the exact values in my second dropdown.

But I'm not sure how to extract the values from there.

var type = ['fruit', 'fruit', 'fruit', 'veg', 'veg', 'veg', 'chinese', 'chinese', 'chinese', 'chinese'];
var item = ['apple', 'banana', 'orange', 'potatao', 'capsicum', 'carrot', 'noodles', 'momos', 'spring roll', 'soup'];

var select = document.getElementById("jqfrt");

for (var i = 0; i < type.length; i++) {
  var opt = type[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
};

$('#jqfrt').change(function(event, informationObj) {
  var selectedValue = $("#jqfrt").val();
  var itemsnew = [];
  for (var i = 0; i < type.length; i++) {
    if (selectedValue == type[i]) {
      itemsnew.push(item[i]);
    };
  };
  console.log(itemsnew);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="jqfrt" id="jqfrt"></select>
<select name="jqitm" id="jqitm"></select>

I'm slightly new to JavaScript a simple help will be appreciated! Thanks.

Possible duplicate of [Populate one dropdown based on selection in another](https://stackoverflow.com/questions/5686735/populate-one-dropdown-based-on-selection-in-another) — Obsidian Age, Oct 26 '17 at 20:19

Sanchit Patiyal · Accepted Answer · 2017-10-26T20:37:07.467

Iterating over the array and appending values in select will do the trick

var type = ['fruit', 'fruit', 'fruit', 'veg', 'veg', 'veg', 'chinese', 'chinese', 'chinese', 'chinese'];
var item = ['apple', 'banana', 'orange', 'potatao', 'capsicum', 'carrot', 'noodles', 'momos', 'spring roll', 'soup'];

var select = document.getElementById("jqfrt");


for (var i = 0; i < type.length; i++) {
  var opt = type[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
};


$('#jqfrt').change(function(event, informationObj) {
  var selectedValue = $("#jqfrt").val();
  var itemsnew = [];
  for (var i = 0; i < type.length; i++) {
    if (selectedValue == type[i]) {
      itemsnew.push(item[i]);
    };
  };
  console.log(itemsnew);
  var select1 = document.getElementById("jqitm");
  select1.innerHTML = "";
  for(var i=0;i<itemsnew.length;i++){
    var opt = itemsnew[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select1.appendChild(el);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="jqfrt" id="jqfrt">
 </select>
<select name="jqitm" id="jqitm">
 </select>

Another thing is you are appending the categories more than once which can be overcome by checking if the option already exits or not like this if($(select).find('option[value="'+type[i]+'"]').length==0)

var type = ['fruit', 'fruit', 'fruit', 'veg', 'veg', 'veg', 'chinese', 'chinese', 'chinese', 'chinese'];
var item = ['apple', 'banana', 'orange', 'potatao', 'capsicum', 'carrot', 'noodles', 'momos', 'spring roll', 'soup'];

var select = document.getElementById("jqfrt");
for (var i = 0; i < type.length; i++) {
  if($(select).find('option[value="'+type[i]+'"]').length==0){
  var opt = type[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);}
};


$('#jqfrt').change(function(event, informationObj) {
  var selectedValue = $("#jqfrt").val();
  var itemsnew = [];
  for (var i = 0; i < type.length; i++) {
    if (selectedValue == type[i]) {
      itemsnew.push(item[i]);
    };
  };
  console.log(itemsnew);
  var select1 = document.getElementById("jqitm");
  select1.innerHTML = "";
  for(var i=0;i<itemsnew.length;i++){
    var opt = itemsnew[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select1.appendChild(el);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="jqfrt" id="jqfrt">
 </select>
<select name="jqitm" id="jqitm">
 </select>

Thanks a lot @sanchit.. This did work for me.. however when i use it with the Bootstrap class `class="selectpicker"` drop downs doesn't populate.. any idea/workaround? — Abhijeet Arora, Oct 27 '17 at 07:34
Can you provide me a fiddle of code with bootstrap class which you are using just put the link in comments — Sanchit Patiyal, Oct 27 '17 at 07:39
After updating the list using `$('.selectpicker').selectpicker('refresh');` this solved my problem.. one of my friends suggested that i should use AJAX for this problem as if i use jquery in my browser it will load the page with lots of text.. i have not used AJAX if you could help me with that i will be very helpful.. thanks in Advance — Abhijeet Arora, Oct 28 '17 at 11:53

score 1 · Answer 2 · answered Oct 26 '17 at 21:01

I would suggest a different data structure, as it is advisable to keep things together when they belong together. A common array index is a quite loose connection. When you make the food-types the keys of an object, and provide the items as array values for those properties, you'll have a very practical base to work with.

Secondly, jQuery offers methods (such as $.map and .append) that lead to shorter code:

var data = {
    fruit: ['apple', 'banana', 'orange'],
    veg: ['potatao', 'capsicum', 'carrot'],
    chinese: ['noodles', 'momos', 'spring roll', 'soup']
};

$('#jqfrt').empty().append($.map(data, function (_, value) {
    return $('<option>').text(value);
})).change(function(event, informationObj) {
    $('#items').empty().append($.map(data[$("#jqfrt").val()], function (value) {
        return $('<option>').text(value);
    }));
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="jqfrt"></select>
<select id="items"></select>

Returning an Object from an Event Handler, when data can not be Structured to a different format

2 Answers2