Search code examples
jqueryformsyui

Get the value of a selected option


I searched my *ss off, but couldn't find the answer online or write the correct code myself. I did manage to get this to work in jQuery, but I need to get it rolling with YUI 2.7.

What am I trying to do? Get the selected value of a drop down menu and write it in another form field.

This works with jQuery:

function displayVals() {
 var subjectValue = $("select").val();
 var subjectName = $("select option[value='"+subjectValue+"']").text()
// set the value of another form field  
$("#TextInput_subject").val("Technische ondersteuning > " + subjectName);
}

$("#SelectionInput_reason").change(displayVals);
displayVals();


// the select menu we are trying to get the selection from..
<select id="SelectionInput_reason">
<option value="">--</option>
<option value="27" name="Televisie" >Televisie</option>
<option value="28" name="Internet" >Internet</option>
<option value="29" name="Mobiel Internet" >Mobiel Internet</option>
<option value="30" name="Telefonie" >Telefonie</option>
<option value="47" name="Horizon" >Horizon</option>
<option value="48" name="Online TV" >Online TV</option>
</select>

This is what I got with YUI where I only get the ID back of the selected option:

getValue = function(e) {
var selectedValue = this.value;
alert(selectedValue); 
} 

YAHOO.util.Event.addListener("SelectionInput_reason", "change", getValue); 

I really can't get any further and it's really frustrating! Hope someone can point me into the right direction.


Solution

  • Look into .options and .selectedIndex attributes of the <select> element.

    getValue = function() {
        var selectedValue = this.value;
        var selectedText = this.options[this.selectedIndex].getAttribute('value');
        alert(selectedValue); 
        alert(selectedText); 
    } 
    

    Test: http://jsfiddle.net/smHRg/