时间戳

首页 > 解决方案 > 如何从下拉框中获取附加字段的值

jquery - 如何从下拉框中获取附加字段的值

问题描述

我想从下拉框中获取值。我可以获取第一行的值，但不能从我之后添加的行中获取。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ 
    $('#combo').change(function(){
    alert( $('#combo').val());
    });
});
</script>
</head>
<body>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>
<input type="text" id="price_id"  name="price"/>
<a class="btn btn-default" id="add" href="#" role="button">Add entry</a> 

<div id="my_div">
</div>
 <script>
$( "#add" ).click(function() {
var newElement = '<select id="combo"><option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option><option value="4">Test 4</option></select> <input type="text" name="price"/> </br>';
$( "#my_div" ).append( newElement); 
});
</script>
</body>
</html>

标签： jqueryappend

解决方案

第一个问题是您的$('#combo').change()处理程序在加载文档时运行，因此之后创建的元素没有处理程序。

您可以将该处理程序设为函数，然后在创建新下拉列表时调用它。

第二个问题是你不应该让它们都具有相同的 ID。因此，我将所有下拉列表更改为有class="combo"，而不是 ID，然后让所有处理程序查找$('.combo')

当您在alert更改处理程序内部进行操作时，您不能再引用 id 中的值，但在 jQuery 处理程序函数内部，$(this)是指触发事件的元素。因此alert($(this).val())从正确的下拉列表中提醒值。

最后，由于我们反复添加处理程序，我首先关闭旧的处理程序，$('.combo').off('change').on('change', function(){... 否则，您将开始从下拉列表中收到多个警报，因为您将添加（相同的）处理程序。

下面的片段正在工作

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){ 
      setChangeHandlers()
    });
</script>
</head>
<body>
<select class="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>
<input type="text" id="price_id"  name="price"/>
<a class="btn btn-default" id="add" href="#" role="button">Add entry</a> 

<div id="my_div">
</div>
<script>
    function setChangeHandlers() {
      $('.combo').off('change').on('change', function(){
        alert( $(this).val());
      });
    }
    $( "#add" ).click(function() {
      var newElement = '<select class="combo"><option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option><option value="4">Test 4</option></select> <input type="text" name="price"/> </br>';
      $( "#my_div" ).append( newElement); 
      setChangeHandlers();
    });
  </script>
</body>
</html>

推荐阅读