当没有匹配值时，解决方法 jquery 在 SELECT 上设置 val() 行为答案

【问题标题】：Workaround jquery set val() behavior on SELECT when no matching value当没有匹配值时，解决方法 jquery 在 SELECT 上设置 val() 行为
【发布时间】：2013-06-15 02:45:14
【问题描述】：

如果我有这个选择框：

<select id="s" name="s">
<option value="0">-</option>
<option value="1">A</option>
<option value="2" selected>B</option>
<option value="3">C</option>
</select>

如果我尝试运行$("#s").val("4")，选择会变为“0”。（请参阅此处的行为：http://jsfiddle.net/4NwN5/）如果我尝试将选择框设置为选择框中不存在的值，我该如何做到这一点不会发生任何变化？

【问题讨论】：

标签： javascript jquery select

【解决方案1】：

你可以试试这个方法：

var toSel = 3; // Say your value is this
if($("#s option[value=" + toSel +"]").length > 0) //Check if an option exist with that value
{
    $("#s").val(toSel); //Select the value
}

或者直接使用prop()

$("#s option[value='" + toSel +"']").prop('selected', true);

Demo

【讨论】：

如果我的选项碰巧有一个在 jquery 选择器中无效的值？像“[”？
是否有一些函数可以转义所有在 jquery 选择器中无效的特殊字符？
@adam0101 是的，我们可以应用正则表达式和实用函数。我会设置一个小提琴。
@adam0101 无需使用正则表达式，请参阅我的答案更新与演示。只需将值括在引号中即可。
@PSL 在玩你的例子，这让我清楚了我对 attr 与 prop +1 的疑问

【解决方案2】：

// grab the selected
var s = $("#s");

// cache the current selectedIndex
var idx = s[0].selectedIndex;

// set the value
s.val("4");

// If it was set to `0`, set it back to the original index
s[0].selectedIndex = s[0].selectedIndex || idx;

你可以把它整合到一个插件中：

jQuery.fn.selectVal = function (val) {
    return this.each(function () {
        if (this.nodeName === "SELECT") {
            var idx = this.selectedIndex;

            $(this).val(val);

            var newOpt = this.options[this.selectedIndex];

            if (newOpt.value !== ("" + val))
                this.selectedIndex = idx;
        }
    })
};

$("#s").selectVal(4);

【讨论】：

s[0].selectedIndex 什么时候会为空？最后一行没看懂
@adam0101：如果设置为第一个选项，它将是0。因为0 是假的，所以它会使用idx。
@adam0101：我更新了插件，以便在您想将其设置为 0 时它可以工作。 FWIW，与基于值进行 DOM 选择相比，这是一个非常轻量级的操作。
我同意。另外，您只需执行一个循环来设置值，而不是使用第二个循环来检查值的存在。

【解决方案3】：

jsFiddle Demo

在调用 jquery 的 val 之前，您可能希望使用自定义过滤器

$.fn.valScreen = function(value){
 if( this.is("select") && this.find("option[value="+value+"]").length != 0 )
  this.val(value);//call vanilla val
 return this;//return jQuery object for chaining
};

然后你就可以使用它了：

$("#s").valScreen("4");

【讨论】：