Question

请考虑以下代码段：

<html>    
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $(function () {
            $("#test-selected").each(function () {
                var val = $(this).val();
                var text = $(this).text();
                alert(val);
                alert(text);
            });
        });
    </script>
</head>
<body>
    <select id="test-selected">
        <option value="val1">text1</option>
        <option value="val2">text2</option>
    </select>
</body>
</html>

这看起来很简单，但在跑步时会变得很奇怪。由于只有2 option个元素，迭代应该运行两次，对吧？

它应该在第一次迭代时alert

val1
text1

第二次

val2
text2

这是预期的。

但相反，迭代只运行一次，首先它会在第二次警报val1时发出text1, text2警报{{1}}。那是为什么？

Answer 1

您需要循环option而不是select元素：

$("#test-selected option").each(function(){

<强> Fiddle Demo

Answer 2

使用$.each()

$("#test-selected option").each(function(){
//your code here
});

DEMO

Answer 3

$("#test-selected").filter("option").each(function(){});

Answer 4

$（“＃test-selected”）仅选择选择字段，如果您想要迭代选项，则只有一个字段，然后使用

$("#test-selected option")

Answer 5

这是因为您正在迭代DOM中的所有select框。由于id只属于一个select框，因此会返回选定的值和选项。您需要遍历options以获得预期结果。

试试这个。

 $("#test-selected option").each(function(){

            var val = $(this).val();
            var text = $(this).text();

            alert(val); 
            alert(text);

        });

JsFiddle

迭代select元素时的奇怪行为

5 个答案: