Question

If I have this code:

 <div id="one">
        <label>first</label> 
        <select name="area" class="area">
        <option selected="selected">First</option>
    </div>

 <div id="two">
        <label>second</label> 
        <select name="area" class="area">
        <option selected="selected">Second</option>
 </div>

Is it possible something like this?

  $("#one: .area").change(function() {}

or 

 $("#two: .area").change(function() {}

It doesn’t work, could someone explain why?

Answer 1

This is probably what you want

$("#one > select.area").change(function() {});

or

$("#two > select.area").change(function() {}

Also Make sure you end your select tag. You have the following HTML

<div id="one">
    <label>first</label> 
    <select name="area" class="area">
    <option selected="selected">First</option>
</div>

It should be

<div id="one">
    <label>first</label> 
    <select name="area" class="area">
        <option selected="selected">First</option>
    </select>  <!-- Note the Ending tag for the select -->
</div>