Custom JQuery Selection

Question

I would like to have 2 selections. As an example the first selection would be

<select>
    <option>IT</option>
    <option>Management</option>
</select>

When I click IT I would like to have this options at the 2nd selections

<option>Programmer</option>
<option>Technician</option>

When I click option 2 I would like to have this option

<option>Sales</option>
<option>Marketing</option>

There isn't really a question here as much as a list of requirements. Please try to narrow the focus of this question. What specifically are you having trouble with? Telling us what you've tried so far would help us better understand how we can help you. — JDB, Jan 19 '15 at 04:07

Josh Crozier · Answer 1 · 2015-01-19T04:16:40.740

Just structure your data like this:

var options = {
    "IT": ['Programmer', 'Technician'],
    "Management": ['Sales', 'Marketing']
};

.. then listen to the change event and modify the target select element accordingly.

In this case, the target select element's children option elements are removed. Next, you would iterate over the selected object's property options[this.value] and append option elements:

Example Here

$('#choices').on('change', function () {
    $('#dependent-select').empty();
    options[this.value].forEach(function (value, index) {
        $('#dependent-select').append($("<option />").val(value).text(value));
    });
});

var options = {
    "IT": ['Programmer', 'Technician'],
    "Management": ['Sales', 'Marketing']
};

$('#choices').on('change', function () {
    $('#dependent-select').empty();
    options[this.value].forEach(function (value, index) {
        $('#dependent-select').append($("<option />").val(value).text(value));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choices">
    <option>IT</option>
    <option>Management</option>
</select>
<select id="dependent-select">
</select>

You should really be using `.forEach` or, preferably, a `for` loop on the array instead of `$.each` and its [notorious performance problems.](http://jsperf.com/jquery-each-vs-each-vs-for-loop/3) — rioc0719, Jan 19 '15 at 04:14

score 1 · Answer 2 · answered Jan 19 '15 at 05:22

Do you want it?

$(document).ready(function() {
  $("#sel1").change(function() {
    var val = $(this).find("option:selected").text();
    AppendNew(val);
  });
  var firstSelected = $("#sel1").find("option").first().text();
  AppendNew(firstSelected);
});

function AppendNew(val) {
  $("#sel2").find("option").remove();
    if (val == "IT") {
      $("#sel2").append("<option>Programmer</option>");
      $("#sel2").append("<option>Technician</option>");
    } else if (val == "Management") {
      $("#sel2").append("<option>Sales</option>");
      $("#sel2").append("<option>Marketing</option>");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel1">
    <option>IT</option>
    <option>Management</option>
</select>

<select id="sel2">
</select>

score 0 · Answer 3 · answered Jan 19 '15 at 04:54

Right off the cuff, I'd say your best bet is to use optgroups. It's a bit old school, but if you are using a drop-down select list, it's the simplest method. If you want to eschew simplicity, then add a class to each option and a data attribute to the main groups. The primary fields would be something like "main" class and the data attribute would be like 'data-group="it"' and 'data-group="management"'.

So your code would be something like this:

$(document).ready(function() {
  $(".sub").hide();
  
  $("#category").on('change',function() {
    if ($(this).hasClass('main')) {
       
       // first hide all subs
       $(".sub").hide();
      
       // now get the data-group and show all of it's subs
       var group = $('#category option:selected').attr('data-group');
       $('.'+group).show();
       
    }
  });
});

<select id="category">
  <option class="main" data-group="it">IT</option>
  <option class="sub it">Programming</option>
  <option class="sub it">Networking</option>
  <option class="main" data-group="management">Management</option>
  <option class="sub management">Pushing Paper</option>
  <option class="sub management">Sharpening Pencils</option>
</select>

score 0 · Answer 4 · answered Jan 19 '15 at 05:33

You may even do like this:

$('select#three').hide();
$('select#one').on('change',function(){
   if($(this).val()=='IT'){
     $('select#two').show();
     $('select#three').hide();
   } else if($(this).val()=='Management'){
     $('select#two').hide();
     $('select#three').show();
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
    <option>IT</option>
    <option>Management</option>
</select>
<select id="two">
<option>Programmer</option>
<option>Technician</option>
</select>
<select id="three">
<option>Sales</option>
<option>Marketing</option>
</select>

Custom JQuery Selection

4 Answers4