[jquery] jQuery to retrieve and set selected option value of html select element

I am attempting to retrieve and set the selected value of a select element (drop down list) with jQuery.

for retrievel i have tried $("#myId").find(':selected').val(), as well as $("#myId").val() but both return undefined.

Any insight into this problem would be much appreciated.

I know this is old but I just had a bear of a time with Razor, could not get it to work no matter how hard I tried. Kept coming back as "undefined" no matter if I used "text" or "html" for attribute. Finally I added "data-value" attribute to the option and it read that just fine.

 <option value="1" data-value="MyText">MyText</option>

 var DisplayText = $(this).find("option:selected").attr("data-value");

$('#myId').val() should do it, failing that I would try:

$('#myId option:selected').val()

Try this

$('#your_select_element_id').val('your_value').attr().add('selected');

$("#myId").val() should work if myid is the select element id!

This would set the selected item: $("#myId").val('VALUE');

Suppose you have created a Drop Down list using SELECT tag like as follows,

<select id="Country">

Now if you want to see what is the selected value from drop down using JQuery then, simply put following line to retrieve that value..

var result= $("#Country option:selected").text();

it will work fine.

When setting with JQM, don't forget to update the UI:

$('#selectId').val('newValue').selectmenu('refresh', true);

$( "#myId option:selected" ).text(); will give you the text that you selected in the drop down element. either way you can change it to .val(); to get the value of it . check the below coding

<select id="myId">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>`
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

to get/set the actual selectedIndex property of the select element use:

$("#select-id").prop("selectedIndex");

$("#select-id").prop("selectedIndex",1);