如何使用jQuery檢索動態生成的元素中的值？

元素「SelectB」和「SelectC」是動態生成的。
當用戶更改「SelectB」中的某些內容時，我需要獲取其值和「SelectC」值。如何使用jQuery檢索動態生成的元素中的值？

$('#SelectB').on('change',function() { 
    var valB = $(this).val(); 
    var valC = $("#SelectC").val(); 
    console.log(valB); //Works good, because $('#SelectB').on .... 
    console.log(valC); //Undefined  
});

因此，在這種情況下，我怎麼能檢索「SelectC」的價值？

這是html（簡體），唯一的例子;

<select id="SelectB"> 
    <option value="0">Volvo</option> 
    <option value="1">Saab</option> 
    <option value="2">Mercedes</option> 
    <option value="3">Audi</option> 
</select> 

<select id="SelectC"> 
    <option value="0">Volvo</option> 
    <option value="1">Saab</option> 
    <option value="2">Mercedes</option> 
    <option value="3">Audi</option> 
</select>

來源

2016-12-02 zwitterion

您可能要張貼樣本HTML以及和'的console.log（$（「＃SelectC」））;' –

您需要確保有一個ID爲「SelectC」的元素。 – marcan2020

如果有加載的父元素，請嘗試'valC = $（'＃parent'）。find（$（'＃SelectC'））。val（）;' – sideroxylon

使用

$(document).on('change', ['#SelectB','#SelectC'], function(){ 
    var valB = $("#SelectB").val(); 
    var valC = $("#SelectC").val(); 
    console.log(valB); 
    console.log(valC); 
});

來源

2016-12-02 02:36:08 shilpi

爲我工作 – zwitterion

我做了一些測試，並且$("#SelectC").val() === undefined的唯一方法是該元素未被創建。

這可能是因爲您在SelectC之前創建了SelectB。

它所做的是：

// SelectB.val() === undefined 
// SelectC.val() === undefined 
// SelectB created 
// SelectB.val() === 0 
// SelectC.val() === undefined

嘗試創建SelectC之前或等待，他們都訂閱更改之前創建的。

應該現在的工作：

// SelectC.val() === undefined 
// SelectB.val() === undefined 
// SelectC created 
// SelectC.val() === 0 
// SelectB.val() === undefined 
// SelectB created 
// SelectC.val() === 0 
// SelectB.val() === 0

來源

2016-12-02 02:25:17 marcan2020

這裏是一個可行的解決方案。希望能幫助到你！

$(document).ready(function(){ 
 
    $('select').on("change",function() { 
 
    alert("SelectB value is: "+ $("#SelectB option:selected").val() + "\n"+ 
 
     "SelectC value is: " + $("#SelectC option:selected").val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<select id="SelectB"> 
 
    <option value="0">Volvo</option> 
 
    <option value="1">Saab</option> 
 
    <option value="2">Mercedes</option> 
 
    <option value="3">Audi</option> 
 
</select> 
 

 
<select id="SelectC"> 
 
    <option value="0">Volvo</option> 
 
    <option value="1">Saab</option> 
 
    <option value="2">Mercedes</option> 
 
    <option value="3">Audi</option> 
 
</select>

來源

2016-12-02 02:27:06 HenryDev

這裏是一個解決方案http://jsfiddle.net/LkqTU/32671/

<select id="SelectB"> 
    <option value="0">Volvo</option> 
    <option value="1">Saab</option> 
    <option value="2">Mercedes</option> 
    <option value="3">Audi</option> 
</select>

的JavaScript

$(document).ready(function() { 
    var myhtml = '<select id="SelectC">' 
    myhtml += '<option value="0">Volvo</option>' 
    myhtml += '<option value="1">Saab</option>' 
    myhtml += '<option value="2">Mercedes</option>' 
    myhtml += '<option value="3">Audi</option>' 
     myhtml += '</select>' 
     $('body').append(myhtml); 
}); 


$('#SelectB').on('change',function() { 
    var valB = $(this).val(); 
    var valC = $("#SelectC").val(); 
    alert(valB); //Works good, because $('#SelectB').on .... 
    alert(valC); //Undefined  
});

來源

2016-12-02 02:28:51

您可以使用一個通用的算法基於數據屬性來發現一對值。當填充兩個值時，源波紋管將顯示一個警報窗口。

$('select').on('change',function() { 
 
    var elem = $(this), 
 
     id = elem.attr('id'), 
 
     val1 = null, 
 
     val2 = null, 
 
     next = $(elem.data('next')), 
 
     prev = null; 
 
    
 
    if (next.length) { 
 
    val1 = elem.val(); 
 
    val2 = next.val(); 
 
    } else { 
 
    prev = $('[data-next="#' + id + '"]'); 
 
    val1 = prev.val(); 
 
    val2 = elem.val(); 
 
    } 
 
    
 
    if (val1 && val2) { 
 
    alert('val1: ' + val1 + ', val2: ' + val2); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<select id="#SelectB" data-next="#SelectC"> 
 
    <option value="">select</option> 
 
    <option value="0">Volvo</option> 
 
    <option value="1">Saab</option> 
 
    <option value="2">Mercedes</option> 
 
    <option value="3">Audi</option> 
 
</select> 
 

 
<select id="SelectC"> 
 
    <option value="">select</option> 
 
    <option value="0">Volvo</option> 
 
    <option value="1">Saab</option> 
 
    <option value="2">Mercedes</option> 
 
    <option value="3">Audi</option> 
 
</select>

來源

2016-12-02 02:32:52 rogeriolino

如何使用jQuery檢索動態生成的元素中的值？

回答

相關問題