JQuery为选中设置了多个下拉选项 [英] JQuery sets multiple dropdown options to selected

问题描述

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

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

 < 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天。 / p>

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

我尝试使用我在以前的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 而不是选择并设置已选择真的吗？这两个都发送回相同的 POST 或 GET 数据？

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

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

如果这个问题太简单，我道歉。在JavaScript和JQuery方面，我仍然是一个业余爱好者。

解决方案

你正在使用（ $ = ），而只是使用 value = ，它只会与您想要的值完全匹配。

  $（＃dom_ option [value ='+ 2 +']）。attr（'selected'，true）; 
  

I have run into an interesting little problem that is probably just me being silly.

I have a select box that looks a little like this:

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

The options represent days of the month and go up to 31.

Now, I was trying to select a default value when the a form with information is loaded (for editing), but I couldn't get it to work quite right.

I tried using this snippet I found in some previous SO questions:

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

This line runs and it sets the 2nd option to selected, but it also sets other 2X or X2 options to selected as well. For example, 12 and 22 will also be set to selected.

If however, I use this:

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

});

Then the right option will get selected, but the SELECT box will not be updated.

I have to manually call $("#dom_").val(2); afterwords to update the box.

So, my question is, why does the first option not work and why does the second one not auto refresh?

Also, what exactly is the difference between taking a SELECT object via $("#dom_") and calling .val on it versus taking an option and setting selected to true? Do both of these send back the same POST or GET data?

Here is a jsFiddle that hopefully demonstrates this.

If it helps, I am using JQuery 1.6.4 but I could reproduce the same problem on some newer versions in jsFiddle.

I apologize if this question is too simple. I am still quite an amateur when it comes to JavaScript and JQuery.

解决方案

You are using the ends with ($=), instead just use value= which will only match exactly the value you want.

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

这篇关于JQuery为选中设置了多个下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！