Manipulate options by data attribute with jQuery

Question

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');
        }

DaniP · Accepted Answer · 2016-07-13 14:04:08Z

4

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>

edited Jul 13, 2016 at 14:04

answered Jul 13, 2016 at 13:56

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gdrt Over a year ago

attr('selected',true) doesn't work. Shouldn't it be prop('selected',true)?

Milind Anantwar · Accepted Answer · 2016-07-13 13:48:42Z

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>

Collectives™ on Stack Overflow

Manipulate options by data attribute with jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related