Question

我有一个简单的选择菜单：

<select id="ind">
  <option id="a">Parent A</option>
  <option id="b">Parent B</option>
  <option id="c">Parent C</option>
</select>

<div id="buttons">
</div>

我正在使用一组数据来创建一些动态按钮。目标是通过使用按钮本身的select，每个按钮都能够触发id菜单中的更改。为此，我正在使用事件委托。

var data = ["a", "b", "c"];

function changeValue() {

  $("#ind").val(this.id).trigger("change");
}

for (var i = 0; i < data.length; i++) {
  $('#buttons').append("<button class='btnParent' type='button' id='" 
+ data[i] + "'>" + data[i] + "</button>");
}

$("#buttons").on("click", ".btnParent", changeValue);

但是，当我单击按钮时，传递给选择的值为null，因此没有任何实际发生。

我认为我正在按预期使用委托（希望如此）。是否有任何修复或替代方案？

修改：忘记添加JSFiddle

Answer 1

您需要将value属性设置为option而不是id。

<select id="ind">
  <option value="a">Parent A</option>
  <!----  ^^^^^^ ------------------->
  <option value="b">Parent B</option>
  <!----  ^^^^^^ ------------------->
  <option value="c">Parent C</option>
  <!----  ^^^^^^ ------------------->
</select>

var data = ["a", "b", "c"];

function changeValue() {

  $("#ind").val(this.id).trigger("change");
}

for (var i = 0; i < data.length; i++) {
  $('#buttons').append("<button class='btnParent' type='button' id='" + data[i] + "'>" + data[i] + "</button>");
}

$("#buttons").on("click", ".btnParent", changeValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ind">
  <option value="a">Parent A</option>
  <option value="b">Parent B</option>
  <option value="c">Parent C</option>
</select>

<div id="buttons">

</div>

事件委托给出空值

1 个答案: