jQuery 按值选择选项元素答案

【问题标题】：jQuery select option elements by valuejQuery 按值选择选项元素
【发布时间】：2011-11-09 14:17:33
【问题描述】：

我有一个由 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');

}

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这是带有清晰选择器的最简单的解决方案：

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

【讨论】：

$.escapeSelector(i) 可能比i 更好。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

只需将您的选项包装在 $(option) 中，使其按您希望的方式运行。您还可以通过

来缩短代码

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您可以使用 .val() 来选择值，如下所示：

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

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

【讨论】：

在哪个浏览器/平台上不适合您？在 Mac/Chrome 上，它成功地选择了列表中的一个项目，这正是最初的问题。
@Mr.Llama，您可能误解了这个问题。 @tom 的代码执行了所要求的操作：给定一个值 i，在 select 中选择第 i 个 option。 OP 没有尝试过滤选项。

【解决方案6】：

要获得价值，只需使用这个：

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

这将获取值

【讨论】：

【解决方案7】：

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

【讨论】：

谢谢！不知道jQuery的内部实现是什么，但是其他的方案看起来比较简单。
如果你已经有 jQuery，那会更容易，但我想你可能想知道一个纯 js 的方法。

【解决方案8】：

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

【讨论】：