Disable options from value selected in previous options using data attribute

Question

I am creating a form with 2 dropdowns 1 for service and 1 for staff. The staff members are linked to a service, therefore when a service is selected in the first select, only those linked to that service will be available in the 2nd select. My current form code is:

<select name="service" id="service">
    <option data-id="1">Service 1</option>
    <option data-id="2">Service 2</option>
    <option data-id="3">Service 3</option>
</select>

<select name="staff" id="staff">
    <option data-id="1">Staff 1</option>
    <option data-id="1 2">Staff 2</option>
    <option data-id="1 3">Staff 3</option>
</select>

You will see that a staff member may offer more than 1 service (I have removed the values for simplicity).

The only jQuery I have right now is reading the value of the selected attribute in #service:

<script>
    $("#service").on("change", function() {
        id = ($(this).find(":selected").data("id"));
    });
</script>

This returns the correct value if I do alert(id).

This is the first time I have ventured into data attributes, but in my head it would do an each() on staff > option, and if they dont contain the selected service id in the data-id, then disabled should be added to the option.

Thank you all

http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery — mplungjan, Feb 24 '16 at 13:55

NiZa · Accepted Answer · 2016-02-24T14:49:38.697

2

$("#service").on("change", function() {
    $("#staff option").removeAttr("disabled");
     var id = ($(this).find(":selected").data("id"));
     $("#staff option[data-id]:not([data-id*='" + id + "'])").attr("disabled", "true");
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service" id="service">
  <option data-id="1">Service 1</option>
  <option data-id="2">Service 2</option>
  <option data-id="3">Service 3</option>
</select>

<select name="staff" id="staff">
  <option data-id="1">Staff 1</option>
  <option data-id="1 2">Staff 2</option>
  <option data-id="1 3">Staff 3</option>
  <option>Staff 4</option>
</select>

edited Feb 24 '16 at 14:49

answered Feb 24 '16 at 14:00

NiZa

3,806
1
21
29

It works extremely well, and is very clean. There was a problem with copy and paste when I first tried it. Thanks. – generalcb Feb 24 '16 at 14:09
Ok great! Goodluck :) – NiZa Feb 24 '16 at 14:11
Thank you. Just as an aside, there may be some staff members who do everything, so they may not have a data-id attribute. How would I apply this disabled feature to only those with a data-id attribute? I tried wrapping an if round it but not joy. – generalcb Feb 24 '16 at 14:47
See my updated answer. Is this what you mean? Sfaff member 4 will always be enabled. – NiZa Feb 24 '16 at 14:49

score 0 · Answer 2 · answered Feb 24 '16 at 14:03

You can do this. Use filter() to get the options from staff and disable them.

$("#service").on("change", function() {
  var id = $(this).find(":selected").data("id") + '';
  $("#staff option").prop('disabled', false);
  options = $("#staff option").filter(function(){
    var staffId = $(this).data('id') + '';
    var arr = staffId.split(' ');
    return $.inArray(id, arr) != -1;
  });
  options.prop('disabled',true)
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="service" id="service">
  <option data-id="1">Service 1</option>
  <option data-id="2">Service 2</option>
  <option data-id="3">Service 3</option>
</select>

<select name="staff" id="staff">
  <option data-id="1">Staff 1</option>
  <option data-id="1 2">Staff 2</option>
  <option data-id="1 3">Staff 3</option>
</select>

Disable options from value selected in previous options using data attribute

2 Answers2