JQuery通過當前SELECT值進行迭代

Question

如何遍歷所有選擇的當前值，而不是選項？

我已經試過這種變化：

$('select[name^="mydropdowns"] :selected').each(function() { 
    if ($(this).val() != 'Test') { 
     alert("Found."); 
    } 
}); 

「測試」是跨越一對夫婦的下拉菜單中選擇默認值，但該腳本永遠不會返回警告。我在這裏做錯了什麼？

Answer 1

通過僅選擇迭代

$('select[name^="mydropdowns"]').each(function() { 
    if ($(this).val() != 'Test') { 
     alert("Found."); 
    } 
}); 

val()是appliable到input/select/textarea元件而不是option元件。

從jQuery的DOC：http://api.jquery.com/val/

的.VAL（）方法主要用於獲得形式元素，如輸入，選擇和textarea的值。

Answer 2

SELECT本身不能被選中，OPTION可以。這就是爲什麼你沒有收到警報。

Answer 3

在這裏，我已經完成了上述問題的完整箱。請檢查演示鏈接一次。

演示：http://codebins.com/bin/4ldqp7h

HTML

<div> 
    <input type="button" id="btn1" value="Check Dropdown Values" /> 
</div> 
<div> 
    <select name="mydropdowns1"> 
    <option value="Test"> 
     Test 
    </option> 
    <option value="Test1"> 
     Test1 
    </option> 
    <option value="Test2"> 
     Test2 
    </option> 
    <option value="Test3"> 
     Test3 
    </option> 
    <option value="Test4"> 
     Test4 
    </option> 
    </select> 
    <select name="mydropdowns2"> 
    <option value="Test"> 
     Test 
    </option> 
    <option value="Test1"> 
     Test1 
    </option> 
    <option value="Test2"> 
     Test2 
    </option> 
    <option value="Test3"> 
     Test3 
    </option> 
    <option value="Test4"> 
     Test4 
    </option> 
    </select> 
    <select name="mydropdowns3"> 
    <option value="Test"> 
     Test 
    </option> 
    <option value="Test1"> 
     Test1 
    </option> 
    <option value="Test2"> 
     Test2 
    </option> 
    <option value="Test3"> 
     Test3 
    </option> 
    <option value="Test4"> 
     Test4 
    </option> 
    </select> 
    <select name="mydropdowns4" multiple="multiple"> 
    <option value="Test"> 
     Test 
    </option> 
    <option value="Test1"> 
     Test1 
    </option> 
    <option value="Test2" selected="selected"> 
     Test2 
    </option> 
    <option value="Test3"> 
     Test3 
    </option> 
    <option value="Test4" selected="selected"> 
     Test4 
    </option> 
    </select> 
</div> 

的jQuery：

$(function() { 
    $("#btn1").click(function() { 
     $('select[name^="mydropdowns"]').each(function() { 
      if ($(this).val() != "Test") { 
       alert("Dropdown[Name=" + $(this).attr('name') + "] has selected value " + $(this).val()); 
      } 
     }); 
    }); 
}); 

演示：http://codebins.com/bin/4ldqp7h

Answer 4

如果我沒有弄錯，我想問題是如何迭代select元素中的選項。

以下是您可以做到的方式。這將使用您的瀏覽器的控制檯（chrome和firefox）來顯示輸出

var dropdown = $("select[name='dropdown']"); 

$('option', dropdown).each(function(){ 
    var val = $(this).prop("value"); 
    console.log(val); 
});