在引导程序双列表框中单击选项时如何提醒弹出窗口？答案

【问题标题】：How do I alert a popup when an option is clicked in the bootstrap duallistbox?在引导程序双列表框中单击选项时如何提醒弹出窗口？
【发布时间】：2020-01-25 18:49:34
【问题描述】：

我在我的网站中使用了Bootstrap Dual Listbox 插件。我想在选择元素中单击特定选项时发出提示，并让用户填写一些数据并使该数据转到所选元素而不是该特定选项。单击选项时，我无法获得选定的选项。我正在使用以下代码 -

<h1>Bootstrap Dual List Box</h1>
    <div class="col-md-6">
        <select multiple="multiple" name="duallist">
            <option value="CCN">Complex Coordination</option>
            <option value="IT">Information Technology</option>
            <option value="CM">Case Management</option>
            <option value="DM">Disease Management</option>
            <option value="NM">Network Management</option>
            <option value="OT">Other</option>
        </select>
    </div>
    <br/>
<script>
$(document).ready(function(){
    var listBox = $("select[name='duallist']").bootstrapDualListbox({
        nonSelectedListLabel:'Non-Selected',
        selectedListLabel:'Selected',
        filterPlaceHolder:'Search',
        moveAllLabel:'Move All'
    });

    $("select[name='duallist_helper1']").on('change',function(){
        alert($("select[name='duallist_helper1']").find('option:selected').text());
        });
    });
});
</script>

警报语句返回空值。

【问题讨论】：

标签： javascript jquery bootstrap-duallistbox

【解决方案1】：

$(this).val()获取选中值，each获取选中文本

$(document).ready(function() {
  var listBox = $("select[name='duallist']").bootstrapDualListbox({
    nonSelectedListLabel: 'Non-Selected',
    selectedListLabel: 'Selected',
    filterPlaceHolder: 'Search',
    moveAllLabel: 'Move All'
  });

  $("select[name='duallist_helper1']").on('change', function(e) {
    let val = $(this).val();
    $("select[name='duallist'] option:selected").each(function() {
      var $this = $(this);
      if ($this.length) {
        var selText = $this.text();
        alert(selText);
      }
    });

  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.1/jquery.bootstrap-duallistbox.min.js" integrity="sha256-InGbz8oJQNJR4OYGCUMcTAtuGJ+J6jGm3vpSgb6YAoc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.1/bootstrap-duallistbox.min.css" integrity="sha256-buHEe+156Hk0w29lJZctyXXfZl4mb8OFe1M6QfDanMs=" crossorigin="anonymous" />

<h1>Bootstrap Dual List Box</h1>
<div class="col-md-6">
  <select multiple="multiple" name="duallist">
    <option value="CCN">Complex Coordination</option>
    <option value="IT">Information Technology</option>
    <option value="CM">Case Management</option>
    <option value="DM">Disease Management</option>
    <option value="NM">Network Management</option>
    <option value="OT">Other</option>
  </select>
</div>

【讨论】：

当在选择元素上调用boostrapDualListbox()方法时，会创建两个选择框，名称分别为_helper1和_helper2，并附加在原始选择元素的名称后，隐藏原始选择元素。跨度>
谢谢。我现在能够获得选定的值。
@RishavJain 很高兴为您提供帮助，请检查答案是否已接受，如果您喜欢 +1。祝你好运

【解决方案2】：

$('[name="duallist"]').on('change',function(){

var el = document.getElementsByName('duallist')[0];

alert(getSelectValues(el));

});

function getSelectValues(select){

var 结果 = [];

var options = select && select.options;

变量选择；

for (var i=0, iLen=options.length; i

opt = options[i];

if (opt.selected) {

result.push(opt.value || opt.text);

}

返回结果； }

【讨论】：