Reputation: 8151

How to select all dropdowns that have a specific value selected?

I don't know if this is possible, but is there a succinct way of selecting all drop downs on a page that have a specific value selected.

For example, I have a number of identical dropdowns (except the id) like so:

<select class="whatever">
  <option value="1">one</option>
  <option value="2">too</option>
  <option value="3">fwee</option>
</select>

I want to be able to do something like this:

$(".whatever:2")

where it would select only those dropdowns that have option with value of 2 selected

All relevant code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    function go()
    {
        alert($(".whatever input[value='2']").length);
    }
</script>
<select class="whatever" id="a">
  <option value="1">one</option>
  <option value="2">too</option>
  <option value="3">fwee</option>
</select>
<select class="whatever" id="b">
  <option value="1">one</option>
  <option value="2">too</option>
  <option value="3">fwee</option>
</select>
<select class="whatever" id="c">
  <option value="1">one</option>
  <option value="2">too</option>
  <option value="3">fwee</option>
</select>
<input type="button" onclick="go();" value="go" />

Upvotes: 1

Answers (4)

Aniket Singh

Reputation: 2634

If you want only count then

<script type="text/javascript">
    function go()
    {
        alert($("select.whatever option[value='2']:selected").length);
    }
</script>

And if you want to select all drop-downs with having selected value 2 (for changing their value or anything else)

<script type="text/javascript">
    function go()
    {
        var allDropdowns = $("select.whatever option[value='2']:selected").parent();
    }
</script>

Upvotes: 0

DVM

Reputation: 1238

I think this should cover what you need:

$(document).ready(function() {
    jQuery("#btn").on('click',function(){
  $('select').filter(function() {
            return $(this).val()==='2';
  }).each(function(){
  console.log($(this).attr("id"))
  })   
    });

});

http://jsfiddle.net/kMb3p/

I've added the console.log there so you can see that it returns the id of the right select elements. That can be changed depending on what you need to do with it :)

Upvotes: 1