jQuery選擇器添加一個字符串，但是選擇后得到未定義的值

Question

如下代碼所示，他們實際上有5個學校下拉列表和5個部門下拉列表。 因此，它將具有五個id，分別是school_1 ， school_2 ， school_3 ...等等。 這五個學校下拉菜單中的選項都相同，值相同，文本相同。

部門下拉列表（ id="dept_x" ）將顯示屬於我在學校下拉列表中選擇的學校的不同部門列表。

該school_1與連接dept_1 ，並school_2與連接dept_2等等...。

現在，我在選擇價值方面遇到問題。 代碼var school_code = $("#school_" + num).val(); 在jQuery中。 我總是得到undefined價值。

如果我使用選擇器"#school_1或"#school_2或其他“，而不是"#school_" + num ，那么它將完美地工作。 它們都做同樣的事情，所以我選擇使用for循環。

我該如何解決？ 還是其他更好的方法？

非常感謝！

HTML示例：

<select id="school_1" name="school_1" class="form-control">
    <option value="1001">school-A</option>
    <option value="1002">school-B</option>
    <option value="1003">school-C</option>
    <option value="1004">school-D</option>
</select>

<select id="dept_1" name="dept_1" class="form-control"></select>

jQuery：

var school_num = '5';   //the value 5 is comes from a php variable and it's a string.
for(var num = 1; num <= parseInt(school_num); num++){

    num = String(num);
    //console.log("#school_" + num);

    $("#school_" + num).change(function(){
    $("#dept_" + num + " > option").remove();

        var school_code = $("#school_" + num).val();
        console.log(school_code);

        //then doing ajax to get department data in the database.

    });
}

Answer 1

我建議您使用一個普通的類，即school來綁定change事件處理程序。 將任意數據存儲在data-*自定義屬性中，可以使用.data(key)進行獲取。 另外， .empty()可用於刪除所有子節點。

的HTML

<select name="school_1" class="form-control school" data-id="1">
    <option value="1001">school-A</option>
    <option value="1002">school-B</option>
    <option value="1003">school-C</option>
    <option value="1004">school-D</option>
</select>

腳本

$(".school").change(function(){
    var num = $(this).data('id');
    var dept = $("#dept_" + num);

    //remove options
    dept.empty();

    var school_code = $(this).val();
    console.log(school_code);

    //then doing ajax to get department data in the database.
});

Answer 2

范圍。

變量'num'的值在.change()調用中讀取-那時，它將始終為5。考慮一下偽代碼版本：

• 遍歷每個元素1-5
• 分配變更處理程序
• 結束循環
• 稍后：更改處理程序命中-num為5

通過在處理程序中使用this解決此問題：

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

您必須為部門做類似的事情。

Answer 3

您需要使用閉包來確保change事件處理程序中的num值是您期望的值，而不是數組中的最后一個值-因為for循環將在任何change事件觸發之前很長一段時間就結束了。

var school_num = '5';
for(var num = 1; num <= parseInt(school_num, 10); num++){
    (function(num) {
        $("#school_" + num).change(function(){
            $("#dept_" + num + " > option").remove();
            var school_code = $("#school_" + num).val();

            //then doing ajax to get department data in the database.
       });  
    })(num)
}

話雖這么說，您可以通過使用通用類和單個事件處理程序來大大改善邏輯。 然后，您可以從第一個select使用DOM遍歷來找到相關的select 。 這將完全消除對循環的需要。 嘗試這個：

 $('.school').change(function() { var $dept = $(this).next('.dept').empty() var school_code = $(this).val(); console.log(school_code) //then doing ajax to get department data in the database. $dept.append('<option>Foo</option>'); // just an example }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="school" name="school_1" class="form-control"> <option value="1001">school-A</option> <option value="1002">school-B</option> <option value="1003">school-C</option> <option value="1004">school-D</option> </select> <select class="dept" name="dept_1" class="form-control"></select> <select class="school" name="school_2" class="form-control"> <option value="1001">school-A</option> <option value="1002">school-B</option> <option value="1003">school-C</option> <option value="1004">school-D</option> </select> <select class="dept" name="dept_2" class="form-control"></select>