CODEWITHSUNDEEP
jquery
Najwa
Najwa

Reputation: 35

Grouping options together in Jquery

I have two selections. Which are IT and Management. Both of them has one of the same option. How can I group them together?

How can I do that? I actually new in Jquery

As you can see the IT and Management had both the same option which is Analyst. How should I code to ensure that the Analyst is declared one time but can be used in both IT and Mangement

Code:

$(document).ready(function() {
  $("#select1").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select2 option').clone());
    }

    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
  });

  $("#select1").change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select1" id="select1">
  <option value="3"></option>
  <option value="1">IT</option>
  <option value="2">Management</option>
</select>
<select name="select2" id="select2">
  <option value="3"></option>
  <option value="1">Programmer</option>
  <option value="1">Technician</option>
  <option value="1">Analyst</option>
  <option value="2">HR</option>
  <option value="2">Secretary</option>
  <option value="2">Analyst</option>
</select>

Upvotes: 1

Views: 443

Answers (1)

Nate Barbettini
Nate Barbettini

Reputation: 53600

As I understand it, you want different options to be populated in the second dropdown, depending on the selection in the first. And, you want to use the "same" option (Analyst) in both the first and second box. Here's one way you could do it:

HTML

<select name="select1" id="select1">
    <option value="it">IT</option>
    <option value="management">Management</option>
</select>
<select name="select2" id="select2">
    <!-- options will be loaded dynamically -->
</select>

JavaScript

// hashtable of all roles
// (keys could be strings or ints, depending on your style and data)
var roles = {};
roles['code'] = 'Programmer';
roles['tech'] = 'Technician';
roles['analyst'] = 'Analyst';
roles['hr'] = 'HR';
roles['secretary'] = 'Secretary';
roles['boss'] = 'Boss';

// store the keys we want for each option group
var groups = {};
groups['it'] = ['code', 'tech', 'analyst'];
groups['management'] = ['hr', 'secretary', 'analyst'];

function changeOptionGroup(groupKey) {
    // clear out the current options
    $("#select2").empty();

    // load the correct ones
    groups[groupKey].forEach(function (value, index) {
        $("#select2").append($("<option />")
            .val(value)
            .text(roles[value]));
    });
}

$(document).ready(function () {
    // when the first box changes, update the second
    $('#select1').change(function () {
        changeOptionGroup($(this).val());
    });

    // fire on page load
    $('#select1').change();
});

Explanation

  1. First, we populate roles with all of the possible options we want to use in the second box. Each one is stored with a key and a value.
  2. Then, we can make a groups object and store an array of the keys we want to see in each group. The group has a key, too - note how I made the keys here (it and management) the same as the values of the options in the select1 dropdown. That'll be useful in a minute.
  3. The changeOptionGroup() function takes a groupKey parameter, clears out the second box, and then uses a loop to add the correct options to the second box depending on the group we've selected. groups[groupKey] accesses the groups object and retrieves the array of role keys we want. .text(roles[value]) looks up a specific role in the roles object (value is provided by the loop).
  4. Finally, we can wire all this up in .ready(). This is pretty simple: just a event binding to .change() to call changeOptionGroup with the currently selected option's value passed in. We also need to fire the event on page load (otherwise, it won't work until the first time the user changes the selection).

JSFiddle: http://jsfiddle.net/do9kq54r/2/

Upvotes: 1

Related Questions