语义UI：动态添加的下拉菜单不会改变选择的值

在使用语义UI框架时，我正在处理可以动态添加多个项目的窗体。语义UI：动态添加的下拉菜单不会改变选择的值

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

在企图孤立我的问题，我创造了这个的jsfiddle：https://jsfiddle.net/e7q1shyv/1/

看来，语义UI下拉菜单没有更新的<select>。

我试过在文档中查找并四处搜索，但无法找到任何关于此的信息。

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

来源

2017-09-19 joshuadelange

它的工作在我身边 –

没有@MuhammadIrfan它不工作单击添加选择之后....再次检查。 -

您的代码将改为

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

工作提琴。然后检查第二个下拉更改 – rahulsm

它在我身边 –

您在此行中有一个错误。

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

这里您将采用'select'的值，它将始终对应您选择的类中的第一个select元素。将其更改为$ this以获取当前实例值。 https://jsfiddle.net/e7q1shyv/3/

来源

2017-09-19 11:11:31 codeslayer1

啊！尴尬！虽然很奇怪，但在我的实际代码中，它根本没有注册更改事件。我猜想回到兔子踪迹。 :) – joshuadelange

哈哈。有时会发生。你一直在寻找一些重大错误，但实际上这是一个非常微不足道的错误:)如果你对与tech有关的讨论感兴趣，你可以加入我的Slack - https://join.slack.com/t/code-slayers -den/shared_invite/enQtMjQxNzM4MzQwMTk0LTVmYzcxZDQxMzliNmEyMmNjZjVmMWNhN2Q0ODkwOWZhMjBmOTA3NWFiN2JmOTY4MzhhODhlMTU4ZTM5NmMxZDI。 – codeslayer1

检查工作代码。

$(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中的选择一审值。

如果您给当前元素的值写了我写的变量valu = $(this).val();它将获取当前元素的值。

这是您更新的jsfiddle链接。

来源

2017-09-19 11:00:19 rahulsm

只要改变$('select')为$(this)，像下面，和它的作品完美：

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

来源

2017-09-19 11:02:39 SilverSurfer

语义UI：动态添加的下拉菜单不会改变选择的值

回答

相关问题