Question

在使用Semantic UI框架时，我正在处理一个可以动态添加多个项目的表单。

这些项目的形式是我需要监听更改的下拉菜单。这适用于加载页面时初始化的下拉菜单，但不适用于动态添加的下拉菜单。

为了解决我的问题，我创建了这个JSFiddle：https://jsfiddle.net/e7q1shyv/1/

似乎语义UI下拉菜单未更新<select>。

我已经尝试查看文档并进行了搜索，但无法找到任何相关信息。

感谢您解决此问题的任何想法！

Answer 1

检查工作代码。

.ui.button {
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.js"></script>
<div class="selects">
  <select class="ui dropdown">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

<button class="ui button">Add select</button>

<p>Value changed: <span></span></p>

valu = $(this).val();

你所做的只是获取select元素的值，所以它每次都会在dom中获取select的第一个实例的值。

如果你在写var D时给出当前元素的值，它将获取当前元素的值。

这是您更新的jsfiddle链接。

Answer 2

只需更改$('select')的{{1}}，就像下面这样，并且效果很好：

$(this)

Answer 3

此行中有错误。

$(document).on('change', 'select', function(){
    $('span').html($('select').val())
});

在这里，您可以选择＆＃39;选择＆＃39;它将始终对应于您选择类中的第一个选择元素。将其更改为$ this以获取当前实例值。

您的代码将更改为

$(document).on('change', 'select', function(){
    $('span').html($(this).val())
});

工作小提琴 - https://jsfiddle.net/e7q1shyv/3/

语义UI：动态添加的下拉菜单不会更改select中的值

3 个答案: