Bootstrap 双列表框和单选，在 jquery 中使用添加/删除/关闭选项在警报中获取值
请任何人帮我解决这个问题.
Can you please anyone help me how to solve this issue.
Bootstrap 有双列表框选项，只有单选/多选.
Bootstrap have dual listbox option with single/multiple select only.
我需要带有单选的双列表框.
I need dual listbox with single select.
说明:
例如:
我有双列表框，左列表框有 5 个选项.我需要单选.(即)如果我在左侧列表框中选择单个选项，它会显示弹出(警报)并获取相应的字段值，并且弹出窗口有添加 或 取消 按钮添加/取消值.单击弹出窗口中的添加选项后，它将添加到右侧列表框中.
I have dual listbox,left listbox have 5 options. I need single select.(i.e) If i select the single option in the left listbox, it shown popup(alert) with fetching the respective field values and also the popup have Add or Cancel button to add/cancel the values.After clicking the add option in popup it will be added in right list box.
如果我选择右侧列表框中的选项，它再次显示弹出(警报)并获取相应的字段值，并且弹出窗口有 Delete 或 Cancel 按钮删除/取消右侧列表框中的值.
And if i select the option in right listbox , again it shown popup(alert) with fetching the respective field values and also the popup have Delete or Cancel button to delete/cancel the values in the right listbox.
请任何人解决这个问题，
Please any one give solution to this problem,
谢谢，
推荐答案
//Html
<select id="sel1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="sel2"></select>
//This is the JS
//On change of the first select
$('#sel1').on('change', function (e) {
e.preventDefault();
var selVal = $(this).val();
var selHtml = $(this).find('option:selected').text();
moveItem('#sel1', '#sel2', selVal, selHtml);//call our function
});
//On change of the second select
$('#sel2').on('change', function (e) {
e.preventDefault();
var selVal = $(this).val();
var selHtml = $(this).find('option:selected').text();
moveItem('#sel2', '#sel1', selVal, selHtml);//call our function
});
//Move function take 4 parameters
function moveItem(moveFrom, moveTo, selVal, selHtml) {
if (confirm("Are you sure? : " + selVal)) {//Confirm dialogue box comes up and on selecting 'ok' this part will be executed
$(moveTo).append('<option value="' + selVal + '">' + selHtml + '</option>');//append a value to select
var mId = moveFrom + ' option[value="' + selVal + '"]';
$(mId).remove();//remove value from the other select
}
return false;
}
相关文章