問(wèn)題描述

請(qǐng)任何人幫我解決這個(gè)問(wèn)題.

Can you please anyone help me how to solve this issue.

Bootstrap 有雙列表框選項(xiàng)，只有單選/多選.

Bootstrap have dual listbox option with single/multiple select only.

我需要帶有單選的雙列表框.

I need dual listbox with single select.

說(shuō)明:

例如:

我有雙列表框，左列表框有 5 個(gè)選項(xiàng).我需要單選.(即)如果我在左側(cè)列表框中選擇單個(gè)選項(xiàng)，它會(huì)顯示彈出(警報(bào))并獲取相應(yīng)的字段值，并且彈出窗口有添加 或 取消 按鈕添加/取消值.單擊彈出窗口中的添加選項(xiàng)后，它將添加到右側(cè)列表框中.

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.

如果我選擇右側(cè)列表框中的選項(xiàng)，它再次顯示彈出(警報(bào))并獲取相應(yīng)的字段值，并且彈出窗口有 Delete 或 Cancel 按鈕刪除/取消右側(cè)列表框中的值.

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.

請(qǐng)任何人解決這個(gè)問(wèn)題，

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;
}

這篇關(guān)于Bootstrap 雙列表框和單選，在 jquery 中使用添加/刪除/關(guān)閉選項(xiàng)在警報(bào)中獲取值的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！