jQuery select option elements by value

JavascriptJquery

Javascript Problem Overview


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 id="span_id">
	<select id="h273yrjdfhgsfyiruwyiywer" 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!

Javascript Solutions


Solution 1 - Javascript

Here's the simplest solution with a clear selector:

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

Solution 2 - Javascript

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

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

Solution 3 - Javascript

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")

Solution 4 - Javascript

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

here is the fiddle http://jsfiddle.net/hRFYF/

Solution 5 - Javascript

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

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

Here is a jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

Solution 6 - Javascript

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

Solution 7 - Javascript

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

Solution 8 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionraptView Question on Stackoverflow
Solution 1 - Javascriptjonathan.coneView Answer on Stackoverflow
Solution 2 - JavascriptdamoiserView Answer on Stackoverflow
Solution 3 - JavascriptAdrian RodriguezView Answer on Stackoverflow
Solution 4 - JavascriptRafayView Answer on Stackoverflow
Solution 5 - JavascripttomView Answer on Stackoverflow
Solution 6 - JavascriptArijit GhoshView Answer on Stackoverflow
Solution 7 - JavascriptHoganView Answer on Stackoverflow
Solution 8 - JavascriptrscView Answer on Stackoverflow