使用變量作為JQuery選擇器

Question

我有一個下拉/選擇菜單，該菜單根據用戶選擇的內容顯示和隱藏各種div。 在每個div內，還有一個下拉菜單/選擇菜單，我也想觸發更改操作。

由於此div是動態分配的ID，因此我正在努力找出如何選擇所需的下拉菜單/選擇菜單。

這是jQuery代碼：

$(document).ready(function(){

    $("#category").change(function(){
        var category = $("#category").val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();
    }) ;

    var category = $("#category").val();
    var selector = 'selector_'+category;

    $("#"+selector).change(function(){
        alert('Do something');
    });
});

還有一些簡化的HTML：

<select id='category'>
    <option value='0'>1</option>
    <option value='1'>2</option>
    <option value='2'>3</option>
</select>

<div class='box class-name' id='1'>
    <select id='selector_1'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='2'>
    <select id='selector_2'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='3'>
    <select id='selector_3'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>

divs根據需要顯示和隱藏，但我終生無法得到警報（“做某事”）； 觸發我認為是我嘗試選擇下拉菜單/選擇菜單的問題。

所有幫助非常感謝！

干杯，DB。

Answer 1

您需要將更改鏈接起來。 按照您的方式，代碼可以一次全部運行，這意味着：

1. 准備好文檔后，請執行以下操作：
2. 在#category元素中設置onChange
3. 查找類別當前值（現在，未選擇任何值，因此值未定義）
4. 將選擇器設置為“ selector_” +未定義
5. 查找具有ID選擇器的元素，因為沒有具有此ID的元素，所以未定義任何更改。

試試這個，代替：

$(document).ready(function() {
    var categoryField = $("#category");
    categoryField.change(function() {
        var category = categoryField.val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();

        var selector = 'selector_'+category;

        $("#"+selector).change(function() {
            alert('Do something');
        });
    });
});

Answer 2

var category = $("#category").val();

類別在加載的頁面上為空。

簡單的解決方案：

$(".box select").change(function(){
    alert('Do something');
});

Answer 3

我檢查了，它在工作

$("#category").change(function(){    
    var category = $("#category").val();
    var box = $('#'+ category);        
    $('.class-name').hide();
    box.show();
    var s = $(box).find('select');        
    $(s).bind("change", function() { 
       alert("Do something"); 
    })
}) 

Answer 4

在每個div內，還有一個下拉菜單/選擇菜單，我也想觸發更改操作。

似乎您正在尋找由div包裝的下拉列表發生變化時觸發事件

如果是這樣，則可以使用jQuery通配符選擇器

在您的情況下，所有這些select元素都具有相同的前綴ID。

因此$（“ [id ^ = selector_]”）將響應任何具有前綴這樣的字符串的選擇框

 $("[id^=selector_").change(function(event){
      $("#demoUp").text($(this).context.value);
    });

檢查此JSFIDDLE 。 占位符將根據selected選項的值進行更新

Answer 5

要指出您已更改文檔頁面上的id在下面使用

$(document).on("change",$("#"+selector),function(){
        alert('Do something');
});

Answer 6

嘗試這個：

$(document).ready(function(){

    $("#category").change(function(){
        var category = $(this).val();
        $('.class-name').hide();
        $('#'+ category).show();

        $("#selector_"+category).change(function(){
            alert('Do something');
        });
    }) ;

});