jQuery按值选择选项元素

Question

我有一个由span元素包装的select元素.我不允许使用select id但我可以使用span id.我正在尝试编写一个javascript/jquery函数,其中输入是数字i,这是select选项的值之一.该功能会将相关选项变为选中状态.

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

我写了如下内容(这不完全有效,这就是我发布这个问题的原因):

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');

}

谢谢!

Answer 1

这是使用清晰选择器的最简单的解决方案:

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

Answer 2

只需将您的选项包装在$(选项)中,使其按您希望的方式运行.你也可以通过这样做来缩短代码

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

Answer 3

使用jQuery> 1.6.1应该更好地使用这种语法:

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

Answer 4

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

这里是小提琴http://jsfiddle.net/hRFYF/

Answer 5

您可以使用.val（）选择值，如下所示：

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

这是一个jsfiddle：https ://jsfiddle.net/tweissin/uscq42xh/8/