[英]Semantic UI dropdown multi-select removes value on refresh
我正在使用ajax
在div#demo
綁定部分視圖並在ajaxstop
上啟動dropdown
。
提交詳細信息后,ajax 再次加載部分視圖以刷新表部分,然后在ajaxstop
上重新啟動dropdown
。
這適用於單選下拉菜單,但多選下拉菜單會重置所選值。
我不希望多選下拉菜單重置它的值。
// partial views var viewA = ` <select class="ui dropdown"> <option value="">Select Single Car</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select class="ui dropdown" Multiple> <option value="">Select Multiple Car</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button type="button" class="ui button primary">Submit</button> ` var viewB = `<table class="ui celled table unstackable"> <thead> <tr><th>Name</th> <th>Age</th> <th>Job</th> </tr></thead> <tbody> <tr> <td data-label="Name">James</td> <td data-label="Age">24</td> <td data-label="Job">Engineer</td> </tr> <tr> <td data-label="Name">Jill</td> <td data-label="Age">26</td> <td data-label="Job">Engineer</td> </tr> <tr> <td data-label="Name">Elyse</td> <td data-label="Age">24</td> <td data-label="Job">Designer</td> </tr> </tbody> </table>` $(document).ajaxStop(function() { $(".dropdown").dropdown({ useLabels: false, }); }); function bindViewA() { $.ajax({ url: "https://jsonplaceholder.typicode.com/todos/1" }); $("#viewA").html(viewA); } function bindViewB() { $.ajax({ url: "https://jsonplaceholder.typicode.com/todos/1" }); $("#viewB").html(viewB); } $(document).on('click', 'button', () => { bindViewB(); }); bindViewA(); bindViewB();
#demo { padding: 30px; } #viewA { margin-bottom: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <div id="demo"> <div id="viewA"></div> <div id="viewB"></div> </div>
重現步驟。
您可以使用如下setting
下拉列表而不進行initialize
$(".dropdown").dropdown('setting', {
useLabels: false,`
})'
// partial views var viewA = ` <select class="ui dropdown"> <option value="">Select Single Car</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select class="ui dropdown" Multiple> <option value="">Select Multiple Car</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button type="button" class="ui button primary">Submit</button> ` var viewB = `<table class="ui celled table unstackable"> <thead> <tr><th>Name</th> <th>Age</th> <th>Job</th> </tr></thead> <tbody> <tr> <td data-label="Name">James</td> <td data-label="Age">24</td> <td data-label="Job">Engineer</td> </tr> <tr> <td data-label="Name">Jill</td> <td data-label="Age">26</td> <td data-label="Job">Engineer</td> </tr> <tr> <td data-label="Name">Elyse</td> <td data-label="Age">24</td> <td data-label="Job">Designer</td> </tr> </tbody> </table>` $(document).ajaxStop(function() { $(".dropdown").dropdown('setting', { useLabels: false, forceSelection: false, sortSelect: true, //clearable: true, fullTextSearch: true, onHide: function() { //cleanDdlOnHide(this); } }); }); function bindViewA() { $.ajax({ url: "https://jsonplaceholder.typicode.com/todos/1" }); $("#viewA").html(viewA); } function bindViewB() { $.ajax({ url: "https://jsonplaceholder.typicode.com/todos/1" }); $("#viewB").html(viewB); } $(document).on('click', 'button', () => { bindViewB(); }); bindViewA(); bindViewB();
#demo { padding: 30px; } #viewA { margin-bottom: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <div id="demo"> <div id="viewA"></div> <div id="viewB"></div> </div>
這似乎在社區叉https://fomantic-ui.com 中已修復
所以嘗試相應地更改 css + js
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.3/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.3/dist/semantic.min.js"></script>
我在這里使用您的代碼准備了一個有效的 jsfiddle https://jsfiddle.net/sezL041k/
我還沒有在semantic
找到dropdown
函數的預期行為。 但是,您可以在ajaxStop
函數上ajaxStop
一個小補丁:
$(document).ajaxStop(function() {
var psel = [];
$(".dropdown [multiple]").each(function(){
psel.push($(this).val());
});
$(".dropdown").dropdown({
useLabels: false
});
$(".dropdown [multiple]").each(function(){
$(this).val(psel[0]).trigger('change');
psel.shift();
});
});
即使有多個下拉列表,只要 jquery 始終以相同的順序選擇它們,這也應該有效。 如果沒有,您始終可以使psel
成為散列並為每個多重選擇器指定一個id
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.