CODEWITHSUNDEEP
jqueryhtml
user5493187
user5493187

Reputation: 212

Manipulate options by data attribute with jQuery

I have a dropdown menu with options, and I want to alter these with jQuery based on their data-* attribute (in this case, hide all options, then show only the ones with X attribute)

Dropdown:

<button onclick="changeopts(10)">click me</button>

<select id="testsel">
        <option data-test="10" value="0">opt1</option>
        <option data-test="11" value="5">opt2</option>
        <option data-test="12" value="200">opt3</option>
</select>

Javascript:

function changeopts(show){
       var opts = document.getElementById("testsel").options;

       $(opts).prop('disabled',true);
       $(opts).css('display','none');

       if ($(opts).attr('data-test')==show){
             $(opts).prop('disabled',false);
             $(opts).css('display','inline');
       }
}

This doesn't work. I assume the if statement can't look at all of the options at the same time. I want to avoid looping through all the options if possible.

Solution that I used:

function changeopts(show){
            var opts = document.getElementById("testsel").options;

            $(opts).prop('disabled',true);
            $(opts).css('display','none');

            $('#testsel option[data-test="'+show+'"]').prop('disabled',false);
            $('#testsel option[data-test="'+show+'"]').css('display','inline');
        }

Upvotes: 3

Views: 3011

Answers (2)

DaniP
DaniP

Reputation: 38252

You can pass that "show" value as a selector:

function changeopts(show) {
  $('#testsel option').hide();
  $('#testsel option[data-test="'+show+'"]').show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeopts(12)">click me</button>

<select id="testsel">
  <option data-test="10" value="0">opt1</option>
  <option data-test="11" value="5">opt2</option>
  <option data-test="12" value="200">opt3</option>
</select>

Bonus

With your actual code I see even if you filter the options the default first one is still selected, you can add another line of code to set the first of matched elements to be the default value:

function changeopts(show) {
  $('#testsel option').hide();
  $('#testsel option[data-test="'+show+'"]').show();
  $('#testsel option[data-test="'+show+'"]').first().attr('selected',true)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeopts(12)">click me</button>

<select id="testsel">
  <option data-test="10" value="0">opt1</option>
  <option data-test="11" value="5">opt2</option>
  <option data-test="12" value="200">opt3</option>
  <option data-test="12" value="210">opt3.1</option>
</select>

Upvotes: 4

Milind Anantwar
Milind Anantwar

Reputation: 82231

It is because you have not filtered element that have data attribute value equal to variable show. Due to which it makes all option elements enabled and visible.

You need to use .filter() function to filter element in option set, then enable it and show:

$(opts).filter(function(){
  return $(this).data("test")  ==  show;
}).prop('disabled', false).show();

Working Snippet:

function changeopts(show){
       var opts = document.getElementById("testsel").options;

       $(opts).prop('disabled',true);
       $(opts).css('display','none');

       $(opts).filter(function(){
         return $(this).data("test")  ==  show;
       }).prop('disabled', false).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button onclick="changeopts(10)">click me</button>

<select id="testsel">
        <option data-test="10" value="0">opt1</option>
        <option data-test="11" value="5">opt2</option>
        <option data-test="12" value="200">opt3</option>
</select>

Upvotes: 1

Related Questions