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

Question

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

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

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

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

我尝试查看文档并四处搜索，但没有找到任何相关信息。

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

Answer 1

检查工作代码。

$(document).ready(function() {
  $('select').dropdown();
});

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

$('button').click(function() {
  $('select').first().clone().appendTo('.selects')
  $('select').dropdown();
});

.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>

你所做的只是获取 select 元素的值，所以它每次都会获取 dom.

中 select 的第一个实例的值

如果你像我写的那样给当前元素的值 var valu = $(this).val(); 它将获取当前元素的值。

这是您更新后的 jsfiddle link.

Answer 2

只需将 $('select') 更改为 $(this)，如下所示，效果完美：

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

Answer 3

你这行有错误。

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

此处您使用的是 'select' 的值，它始终对应于 select 的 class 中的第一个 select 元素。将其更改为 $this 以获取当前实例值。

您的代码将更改为

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

工作 fiddle - https://jsfiddle.net/e7q1shyv/3/

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

Semantic UI: Dynamically added dropdown menu doesn't change value in select

html

javascript

jquery

semantic-ui