Question

我需要使用JQuery获取选定的动态创建的select下拉框的值。

示例：

如果我从第一个下拉列表中选择值Red，则Jquery应该提醒值“红色”。

如果我从第二个下拉列表中选择另一个值，则下一个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>

在这方面的任何建议将不胜感激。

Answer 1

您需要在此处使用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>

Answer 2

您可以使用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>

Answer 3

您可以使用简单的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>

Answer 4

尝试一下

<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获取动态创建的选择下拉框的值

4 个答案: