語義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：動態添加的下拉菜單不會改變選擇的值

回答

相關問題