我正在使用 ajax
绑定(bind) div#demo
中的部分 View ,并在 ajaxstop
上启动 dropdown
.
提交详细信息后,ajax 再次加载部分 View 以刷新表格部分,然后在 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5f49414d4258454f0159456c1e0218021e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffceae2eee1fbe6eca2fae6cfbda1bba1bd" rel="noreferrer noopener nofollow">[email protected]</a>/dist/semantic.min.js"></script>
<div id="demo">
<div id="viewA"></div>
<div id="viewB"></div>
</div>
重现步骤。
- 从两个下拉列表中选择元素
- 点击“提交”按钮重新加载详细信息部分
最佳答案
您可以使用下面的设置
来设置下拉列表,而无需初始化
$(".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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2053454d414e5449430d554960120e140e12" rel="noreferrer noopener nofollow">[email protected]</a>/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4132242c202f3528226c342801736f756f73" rel="noreferrer noopener nofollow">[email protected]</a>/dist/semantic.min.js"></script>
<div id="demo">
<div id="viewA"></div>
<div id="viewB"></div>
</div>
关于javascript - 语义 UI 下拉多选会删除刷新时的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59529005/