Bootstrap双列表框和单选,通过jquery中的添加/删除/关闭选项获取警报中的值

s3fp2yjn  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(93)

你能请任何人帮助我如何解决这个问题。
Bootstrap有两个列表框选项,仅支持单选/多选。
我需要与单一选择双列表框。

说明:

例如:
我有双列表框,左列表框有5个选项。我需要单选。(即)如果我在左列表框中选择单个选项,它会显示弹出窗口(警报),获取相应的字段值,并且弹出窗口有添加取消按钮,用于添加/取消值。单击弹出窗口中的添加选项后,它将被添加到右列表框中。
如果我选择右侧列表框中的选项,则会再次显示弹出窗口(警报),获取相应的字段值,弹出窗口还包含删除取消按钮,用于删除/取消右侧列表框中的值。
请任何一个人给予解决这个问题,
谢谢你,

olhwl3o2

olhwl3o21#

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

相关问题