语义 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功能上做一些补丁：

$(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。