[英]Get the value of dynamically created select dropdown boxes using JQuery
我需要使用JQuery获取所选动态创建的选择下拉框的值。
例：
如果我从第一个下拉列表中选择值Red ，则Jquery应该提醒值“ red”。
如果我从第二个下拉列表中选择另一个值，则下一个Jquery应该提醒该选定值。 这些下拉菜单是动态创建的下拉菜单。
<select class="" id="part_no0" name="part_no[]">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<select class="" id="part_no1" name="part_no[]">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="bus">Bus</option>
</select>
<select class="" id="part_no2" name="part_no[]">
<option value="apple">Apple</option>
<option value="huawei">Huawei</option>
<option value="sony">Sony</option>
</select>
在这方面的任何建议将不胜感激。
您可以使用change事件获取值。
$(document).ready(function(){ $("select[name='part_no[]']").change(function(){ console.log($(this).val()); }); })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <select class="" id="part_no0" name="part_no[]"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <select class="" id="part_no1" name="part_no[]"> <option value="car">Car</option> <option value="bike">Bike</option> <option value="bus">Bus</option> </select> <select class="" id="part_no2" name="part_no[]"> <option value="apple">Apple</option> <option value="huawei">Huawei</option> <option value="sony">Sony</option> </select> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </body> </html>
您需要在此处使用event delegation 。 在父项上添加更改事件侦听器，然后检查事件是否从提供的选择器中冒泡。
// Adding a change event listener $("#result").on("change", "select[name='part_no[]']", function(){ console.log(this.value); }) // Asynchronously adding dropdowns setTimeout(function(){ $("#result").html(`<select class="" id="part_no0" name="part_no[]"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <select class="" id="part_no1" name="part_no[]"> <option value="car">Car</option> <option value="bike">Bike</option> <option value="bus">Bus</option> </select> <select class="" id="part_no2" name="part_no[]"> <option value="apple">Apple</option> <option value="huawei">Huawei</option> <option value="sony">Sony</option> </select>`); }, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="result"></div>
您可以使用简单的javascript进行操作，将On change event listener添加到所有选择的内容中，并带有一个函数来处理以元素为值的逻辑。
看这个例子
$('.addelemnt').on('click', function() { var dynamicElment = $('.temp-container').html(); $('.select-wrapper').html(dynamicElment); $('.temp-container').remove(); }); function AlertVal(e){ alert(e.options[e.selectedIndex].value); };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="select-wrapper"></div> <div class="temp-container"> <select onchange="AlertVal(this);" class="" id="part_no0" name="part_no[]"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <select onchange="AlertVal(this);" class="" id="part_no1" name="part_no[]"> <option value="car">Car</option> <option value="bike">Bike</option> <option value="bus">Bus</option> </select> <select onchange="AlertVal(this);" class="" id="part_no2" name="part_no[]"> <option value="apple">Apple</option> <option value="huawei">Huawei</option> <option value="sony">Sony</option> </select> </div> <button class="addelemnt">Create Dynamique Content</button>
尝试这个
<select class="" id="part_no0" name="part_no[]">
<option value="red" onclick="alert(this.value);">Red</option>
<option value="green" onclick="alert(this.value);">Green</option>
<option value="blue" onclick="alert(this.value);">Blue</option>
</select>
<select class="" id="part_no1" name="part_no[]">
<option value="car" onclick="alert(this.value);">Car</option>
<option value="bike" onclick="alert(this.value);">Bike</option>
<option value="bus" onclick="alert(this.value);">Bus</option>
</select>
<select class="" id="part_no2" name="part_no[]">
<option value="apple" onclick="alert(this.value);">Apple</option>
<option value="huawei" onclick="alert(this.value);">Huawei</option>
<option value="sony" onclick="alert(this.value);">Sony</option>
</select>
但是不适用于键盘导航。
使用jQuery获取动态创建的多个下拉列表的选定值
[英]Get selected value of dynamically created multiple dropdown using jquery
jQuery - 动态创建的选择框在选择值时不触发函数
[英]jQuery - dynamically created select boxes not triggering function when value is selected
如何使用带有类的Jquery从动态创建的复选框中获取值
[英]How to get the value from dynamically created checkbox using Jquery with class
如何从jquery的下拉列表中为动态创建的文本框选择验证？
[英]How to select validation for dynamically created textbox from dropdown in jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.