我正在使用以下代码添加国家,其中用户从一个多选中选择国家并添加到另一个多选,并在提交时将第二个多选的国家插入到数据库中。
.js
$(document).ready(function(){
$('.add').click(function(){
$('#country_list option:selected').appendTo('#country_select');
});
$('.remove').click(function(){
$('#country_select option:selected').appendTo('#country_list');
});
$('.add-all').click(function(){
$('#country_list option').appendTo('#country_select');
});
$('.remove-all').click(function(){
$('#country_select option').appendTo('#country_list');
});
$("#register").click(function() {
$("#country_select option").each(function() {
$(this).attr("selected", "selected");
});
});
});
.html
<select id="country_list" size="10" multiple style="min-width: 200px;">
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="IN">India</option>
</select>
<table border="0">
<tr><td><input type="button" class='add' value=">"/></td></tr>
<tr><td><input type="button" class='remove' value="<"/></td></tr>
<tr><td><input type="button" class='add-all' value=">>>"/></td></tr>
<tr><td><input type="button" class='remove-all' value="<<<"/></td></tr>
</table>
<select size="10" name="country_select[]" id="country_select" multiple style="min-width: 200px;">
</select>
此处,当单击添加按钮时,下拉国家列表中的选定项目移动到国家选择。
我需要的是,当添加一个国家/地区时,它应该按名称顺序移动到下拉国家/地区选择中。目前,当一个国家被添加时,它会在国家选项列表的底部。
我尝试使用此Javascript 对选择元素的内容进行排序,但无法正常工作。