Question

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.

Answer 1

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.