Written Written - 5 months ago 17
Javascript Question

How to make 2 drop down menus dependent on another without using values

Currently, I am trying to set up 3 drop down menus, where the 2nd and 3rd should filter results based on the first one. I searched for this answer, but I was unable to find anything that worked. Here is the code I am working with:

<div class="form-group">
<label>Item</label><br>
<select name="item" id="item">
<option name="0">Choose an Item</option>
<option name="1">Item 1</option>
<option name="2">Item 2</option>
<option name="3">Item 3</option>
</select>
</div>
<div class="form-group">
<label>Description</label><br>
<select name="description" id="description">
<option name="0"></option>
<option name="1">Desc 1</option>
<option name="2">Desc 2</option>
<option name="3">Desc 3</option>
</select>
</div>
<div class="form-group">
<label>Code</label><br>
<select name="code" id="code">
<option name="0"></option>
<option name="1">Code 1</option>
<option name="2">Code 2</option>
<option name="3">Code 3</option>
</select>
</div>


$("#item").change(function () {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#description option').clone());
}
var id = $(this).find('option:selected').attr("name");
var options = $(this).data('options').filter('[name=' + id + ']');
$('#description').html(options);
});


$("#item").change(function () {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#code option').clone());
}
var id = $(this).find('option:selected').attr("name");
var options = $(this).data('options').filter('[name=' + id + ']');
$('#code').html(options);
});


Item is the name of the initial selection I am making, while I would like to filter the description and code options after. Ideally the name of the item selected would filter the other boxes to only show the options associated with that item. Currently, the code shows up as expected, but the description does not. What can I do to change this?

I am attempting to use the names of the options as the key for the filtration as opposed to the values because I do not want to get the values when I get what has been selected in Django. Alternatively, if there is a way to not get the value, but the text instead please tell me I'm being stupid and let me know.

Answer

Ok let me understand right. You want to allow only items that match options from previous option not copying selected answer from previous option. Look at the fiddle now then tell me if it is close to what you want jsfiddle.net/mybkhw69/5

Update: jsfiddle.net/mybkhw69/11

$("#item").change(function() {
  var id = $(this).find('option:selected').attr("name");
  $('#description').children('option').filter('[name!=' + id + ']').css('display', 'none').prop("selected", false);
  $('#description').children('option').filter('[name=' + id + ']').css('display', 'block').first().prop("selected", true);
  $('#code').children('option').filter('[name!=' + id + ']').css('display', 'none').prop("selected", false);
  $('#code').children('option').filter('[name=' + id + ']').css('display', 'block').first().prop("selected", true);
});

$("#description").change(function() {
  var id = $(this).find('option:selected').attr("name");
  $('#code').children('option').filter('[name!=' + id + ']').css('display', 'none').prop("selected", false);
  $('#code').children('option').filter('[name=' + id + ']').css('display', 'block').first().prop("selected", true);
});
Comments