语义 UI 下拉多选删除刷新时的值

Question

我正在使用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>

重现步骤。

1. 从两个下拉列表中选择项目
2. 单击提交按钮以重新加载详细信息部分

Answer 1

您可以使用如下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>

Answer 2

这似乎在社区叉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/

Answer 3

我还没有在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 。