Getting value from select drop down with jquery issue

JavaScript
1

I have 2 select drop downs. Using jquery selector syntax i should be able to get the value of each drop down when i change them.

It works for the first select box, but does not access the second, that is why it comes up with the same value.

Any ideas why this is happening? I remember accessing this by class a while ago and it worked just fine.

<script type=‘text/javascript’>

$(document).ready(function(){

$(“.hi”).live(‘change’,function(){
alert($(this+“option:selected”).val());
});

});

</script>

</head>

<body>

<form>

<select class=‘hi’>

<option value=‘1’>one</option>
<option value=‘2’>two</option>
<option value=‘3’>three</option>
<option value=‘4’>four</option>

</select>

<select class=‘hi’>

<option value=‘1’>one</option>
<option value=‘2’>two</option>
<option value=‘3’>three</option>
<option value=‘4’>four</option>

</select>

</form>

2

Creating two objects with the same class value, does create a collection?

For what you are trying to do, it will be better to get the objects by id property instead, setting them different values.

See you :cool:

3

Thanks for your reply, pablogo

I was creating the drop downs dynamically, so i had to assign a dynamic name to each of them when i created them (but still retaining the bind handler to the classname for functionality), and then when i changed them, it would get the name attribute, then allowing me to access their option values independantly from each other.

like this:

$(“.routingselectbox”).live(‘change’,function(){

//get the select name attribute of select
var getname = $(this).attr('name');

//get the currently selected value of it
var currentvalue = $("select[name='"+getname+"'] option:selected").val(); 

    alert(currentvalue);

});

4 

<script type='text/javascript'>

$(document).ready(function(){

$(".hi").live('change',function(){
alert(this+"option:selected");
//alert($(this+"option:selected").val());
});


});


</script>

What does the alert say?

5

If i did it that way, the alert would just give me the selected option from the first dropdown. If i changed the second, it would still give me the selected value from the first.

It appears that some html elements can get unique values when using classnames, and others can not so easily using jquery.

However, i did figure it out, and it meant creating a dynamic name for each of the selects and using that to find the selected option (see my previous post).

The wierd thing is, if i can use $(this).attr(‘name’); to get the unique name of the select i just changed, why can’t i do the same for option:selected? different functionality for the selector syntax i guess.

6

the “option” isn’t a node in pure sense, “options” are collection o objects that are included into “select” nodes.

So, if you want the “text” for a specific “option” (the selected one) you should point to that “option” cause the “select” node do not has a “text” property, so does the “option”

Some example


//getting "text" from select node

// o = instance of a Select node

o.options[o.selectedIndex].text;

That’s means that you should access the option collection for the retriving the text actually being displayed on the select.

See you :cool:

7

Interesting. Thanks for the information.