jQuery select option elements by value

I have a select element wrapped by a span element. I am not allowed to use the select id but I am allowed to use the span id. I am trying to write a javascript/jquery function in which the input is a number i, which is one of the values of the select's options. The function will turn the relevant option to selected.

<span> <select multiple="multiple"> <option value="1">cleaning</option> <option value="2">food-2</option> <option value="3">toilet</option> <option value="4">baby</option> <option value="6">knick-knacks</option> <option value="9">junk-2</option> <option value="10">cosmetics</option> </select> </span> 

I wrote something as follows (this does not completely work, which is why I am posting this question):

function select_option(i) { options = $('#span_id').children('select').children('option'); //alert(options.length); //7 //alert(options[0]); //[object HTMLOptionElement] //alert(options[0].val()); //not a jquery element //alert(options[0].value); //1 //the following does not seem to work since the elements of options are DOM ones not jquery's option = options.find("[value='" + i + "']"); //alert(option.attr("value")); //undefined option.attr('selected', 'selected'); } 

Thanks!

8 Answers

Here's the simplest solution with a clear selector:

function select_option(i) { return $('span#span_id select option[value="' + i + '"]').html(); } 

With jQuery > 1.6.1 should be better to use this syntax:

$('#span_id select option[value="' + some_value + '"]').prop('selected', true); 

Just wrap your option in $(option) to make it act the way you want it to. You can also make the code shorter by doing

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected") 

options = $("#span_id>select>option[value='"+i+"']"); option = options.text(); alert(option); 

here is the fiddle

You can use .val() to select the value, like the following:

function select_option(i) { $("#span_id select").val(i); } 

Here is a jsfiddle:

To get the value just use this:

<select id ="ari_select" onchange = "getvalue()"> <option value = "1"></option> <option value = "2"></option> <option value = "3"></option> <option value = "4"></option> </select> <script> function getvalue() { alert($("#ari_select option:selected").val()); } </script> 

this will fetch the values

function select_option(index) { var optwewant; for (opts in $('#span_id').children('select')) { if (opts.value() = index) { optwewant = opts; break; } } alert (optwewant); } 

$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);