Question

我遇到了一个有趣的小问题，可能只是我很傻。

我有一个看起来有点像这样的选择框：

<select id="dom_" name="dom_">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    ...

选项代表一个月中的几天，最多可达31天。

现在，当我加载一个包含信息的表单（用于编辑）时，我试图选择一个默认值，但我无法使其正常工作。

我尝试使用我在之前的一些SO问题中找到的这个片段：

$("#dom_ option[value$='" + 2 + "']").attr('selected', true);

此行运行并将第二个选项设置为选中，但它也会将其他2X或X2选项设置为已选中。例如，12和22也将被设置为选中。

但是，如果我使用它：

$("#dom_ option").each(function()
{
    if ($(this).val() == 2)
    {
        $(this).attr('selected', true);
    }
    else
    {
        $(this).attr('selected', false);
    }

});

然后会选择正确的选项，但不会更新SELECT框。

我必须手动拨打$("#dom_").val(2);后来更新该框。

所以，我的问题是，为什么第一个选项不起作用，为什么第二个选项不能自动刷新？

另外，通过SELECT获取$("#dom_")对象并在其上调用.val与选择并将selected设置为true之间的区别究竟是什么？这两个都会发回相同的POST或GET数据吗？

这是一个jsFiddle，希望能够证明这一点。

如果有帮助，我使用的是JQuery 1.6.4，但我可以在jsFiddle中的某些较新版本上重现相同的问题。

如果这个问题太简单，我道歉。在JavaScript和JQuery方面，我仍然是一个非常业余的人。

Answer 1

您使用（$=）结尾，而只使用value=，它只会与您想要的值完全匹配。

$("#dom_ option[value='" + 2 + "']").attr('selected', true);

Answer 2

这听起来像一个简单的设计，你不需要在javascript中这样做（即如果它是静态内容，你只需要一个简单的默认值）。您是否知道可以将“selected”属性应用于html选项标记？

<select id="dom_" name="dom_">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    ...

Answer 3

两者现在都可以使用 ，

1）根据Jquery Ends With Selector（[name$="value"]）将选择具有指定属性的元素，其值完全以给定字符串结尾。

  $("#dom_ option[value='" + 2 + "']").attr('selected', true);

2）在第二个示例中，else案例是不必要的，因为它会重置selected选项

$("#dom option").each(function()
{
    if ($(this).val() == 2)
    {
        $(this).attr('selected', true);
    }
});

检查此Jsfiddle http://jsfiddle.net/NUTWR/

JQuery为选中设置了多个下拉选项

3 个答案: