2

I have some HTML that looks like this:

<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>

<div class="MyClass">
....stuff
  <select>
    <option value="1">blahblah</option>
    <option value="2">blahblah</option>
  </select>
</div>

<div class="MyClass">
....stuff
  <select>
    <option value="5">blahblah</option>
    <option value="10">blahblah</option>
  </select>
</div>

As you can see, I have several divs of class MyClass and some of these divs have a select box inside.

I have the following javascript that's used to trigger an event:

$(document).ready(function () { 
  $('.MyClass').click(function () { DoThing($(this)); }); 
});

The DoThing function looks like this:

function DoThing(TheDiv) {
  var Value = parseInt(TheDiv.find(select).val());
  alert(Value);
}

That's the part I'm struggling on: how do I find the value of the select that's selected? For now, it alerts only 1.

Thanks for your suggestions.

Improve this question
1
  • could I inquire as to why you are grabbing the value of the SELECT list on click of the DIV that contains it? As you may or may not know, that value will be assigned to your VAR before the user has a chance to change it. (as it is triggered once a user clicks the DropDown) Commented Jan 16, 2012 at 21:11

4 Answers 4

Reset to default
5

Description

You should use jQuery's :selected selector to get the selected option.

Check out my sample and this jsFiddle Demonstration

Sample

Html

  <select id="firstSelect">
    <option value="5">blahblah</option>
    <option selected="true" value="10">blahblah</option>
  </select>
  <select id="secondSelect">
    <option value="5">blahblah</option>
    <option selected="true" value="14">blahblah</option>
  </select>
  <select id="thirdSelect">
    <option value="5">blahblah</option>
    <option selected="true" value="20">blahblah</option>
  </select>

jQuery

alert($("#firstSelect option:selected").val());
alert($("#secondSelect option:selected").val());
alert($("#thirdSelect option:selected").val());

More Information

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

2 Comments

Although I realize that your fiddle is but a demonstration, take a look at this scenario here: jsfiddle.net/yyASx/1 – not pretty, huh?
Absolutely, this was just a sample. You should assign a unique id to your selects. Check out jsfiddle.net/yyASx/2
1 
var selectedValues = [];    
$("select option:selected").each(function () {
   selectedValues.push(parseInt($(this).val(), 10));
});
Improve this answer

5 Comments

.val() basically does just that and is the better way to go.
Well val gets the first selected value, the question had multiple select statements which should be handled.
Okay, I might have misunderstood the question … If it is what you think it is, you're right about the $.each(). Still, parseInt($(this).text()) is a pretty … err … creative approach, since $.each() passes you one element at a time and text() is definitely not what you're looking for anyways. Oh, also, you should never ever use parseInt() without an explicit base (like parseInt(x, 10)) or you will run into big trouble. Try parseInt('08')' vs. parseInt('08', 10)` and see for yourself.
@vzwick is correct... in your example Abhi you are using .text() which retrieves the text/label show in the dropdown, not the VALUE defined.
Updated the code to use the val() instead of text, also used an array to capture the values in an array
1

Using select option:selected will return the desired result:

function DoThing(TheDiv) {
    var Value = TheDiv.find('select option:selected').val();
    alert(Value);
}

Also DoThing is missing a ) before the first ;.

Improve this answer

2 Comments

You seem to have misunderstood the documentation. "Get the current value of the first element in the set of matched elements." means that $('#some-select').val(); is equivalent to $('#some-select').first().val(), rather than $('#some-select option').first().val() like you suggested.
Correct and bad on my part. I will update my response. Thanks. Also, that's even show as an example in the documentation: $('select.foo option:selected').val(); // get the value from a dropdown select $('select.foo').val(); // get the value from a dropdown select even easier
0

Here's how I would do it (assuming that there always is exactly one select per .MyClass):

$(document).ready(function () { 
    $('.MyClass').click(function() {
        val = $('select', this).val();
        alert(val);
    }); 
});

Bonus: The working jsFiddle

Edit:

Also, Betard Fooser's comment is absolutely worth noting. The better way to bind the handler would be:

$(document).ready(function () { 
    $('.MyClass select').change(function() {
        val = $(this).val();
        alert(val);
    }); 
});

No need to read on from here, just a typo caught

Also, your binding is missing a closing bracket and thus won't work:

$(document).ready(function () { 
  $('.MyClass').click(function () { DoThing($(this); });
//                                                 ^
//                                Missing ")" here |
});

So, if you try

$(document).ready(function () { 
  $('.MyClass').click(function () { DoThing($(this)); }); 
});

instead, things should work pretty nicely.

Improve this answer

3 Comments

@BetardFooser It's not nothing, it's noting, mate! ;)
@vzwick my sincerest apologies... apparently my reading skills first thing in the morning before my first coffee are worthless. Sorry dude, total goof on my part.
@BetardFooser You're welcome, that state is all too familiar to me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.