未显示第二个选项值

Question

我想获得第二个选项值打印，我怎么能以这种方式。请更新以下代码。

$('#select1').change(function() {

  var form_data = {
    userName: $('#select1').val()
  };
  var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';

  document.getElementById('selsear').innerHTML = data1;
});

$('#siteSelect').change(function() {

  var form_data = {
    userName: $('#siteSelect').val()
  };

  alert(form_data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<div id="selsear">
</div>

如何打印第二个选项（我在side javascript中创建）值？

请告诉我如何从第二个选项中获得价值。

Answer 1

$('#select1').change(function() {

  var form_data = {
    userName: $('#select1').val()
  };
  var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';

  document.getElementById('selsear').innerHTML = data1;
});

$(document).on('change', '#siteSelect', function() {

  var form_data = {
    userName: $('#siteSelect').val()
  };

  alert(form_data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<div id="selsear">
</div>

1. 对动态创建的元素使用事件委托
2. 使用.on()

Answer 2

您面临的问题是在将siteSelect项添加到dom之前添加了侦听器。

在第一个select元素的change函数中添加侦听器。

当#select1元素中发生任何值更改，并且您在select1内添加siteSelect元素且元素{{}时，会调用select1的更改功能在siteSelect DOM上触发任何更改事件之前，不会在DOM中添加{1}}。

因此，当您尝试在select1上添加更改事件时，它会失败，因为此时DOM中没有siteSelect元素，因此不会添加任何更改事件侦听器，也不会触发任何更改事件侦听器siteSelect。

此外，您选择错误的选择元素的值，您可以获取此siteSelect或$('#select1 option:selected').val()之类的选定值，以获取文本而不是值属性。

一种解决方案如下所示

$('#select1 option:selected').text()

$('#select1').change(function() {

  var form_data = {
    userName: $('#select1 option:selected').val()
  };
  var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';

  document.getElementById('selsear').innerHTML = data1;
  
  $('#siteSelect').change(function() {

  var form_data = {
    userName: $('#siteSelect option:selected').val()
  };

  alert(form_data);
});

});

Answer 3

每次更新selsear的innerHTML时，绑定其先前子节点的处理程序将被删除（因为它们不再存在）。因此，我们可以重新绑定这些处理程序，或者由于事件冒泡而将事件进一步委托给DOM树。

当更改事件发生在selsear的子选择元素上时，我们不会直接捕获它。相反，我们将处理程序绑定到文档并允许它冒泡。当事件被捕获时，我们检查它是否源自我们的目标元素 - 在这种情况下是一个id为siteSelect的元素。

＆＃13;

＆＃13;

$('#select1').change(function() {
  var form_data = {
    userName: $('#select1').val()
  };
  var data1 = '<select class="selectpicker form-control m-b" data-live-search="true" data-style="btn-primary" name="site" id="siteSelect" required><option selected disabled > Please select site </option><option value="942">DEHIWALA</option><option value="941">KOLLUPITIYA</option><option value="944">MORATUWA</option><option value="940">PRIME LAND</option><option value="943">RATHMALANA</option></select>';

  document.getElementById('selsear').innerHTML = data1;
});

$(document).on('change', '#siteSelect', function () {
    var form_data = {
      userName: $('#siteSelect').val()
    };

    alert(form_data);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<div id="selsear">
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：暂时不使用jQuery，只是看到delegate被弃用了。已更改为使用on方法。