使用 JQuery 获取动态创建的选择下拉框的值答案

【问题标题】：Get the value of dynamically created select dropdown boxes using JQuery使用 JQuery 获取动态创建的选择下拉框的值
【发布时间】：2019-01-19 19:05:12
【问题描述】：

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

例子：

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

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

【问题讨论】：

也提供你的js代码。
Get selected value in dropdown list using JavaScript?的可能重复

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

这行得通！！！现在我想获取所选下拉列表的 id 值，我的意思是 id="part_no2"。
获取当前选中的元素id使用e.id

【解决方案3】：

您需要在这里使用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>

【讨论】：

【解决方案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>

但不适用于键盘导航。

【讨论】：

我希望能帮上一些忙。