在文本中显示带有复选框值的多个 select 下拉列表

Question

我在显示文本中带有复选框值的多个 select 下拉菜单时遇到问题。

下面是示例代码：

<html>
<body>
<select id="mySelect" multiple class="form-control"  onchange="myFunction()">
 <option value="" selected>Sila Pilih</option>
<option value="Kakitangan MPK">Kakitangan MPK</option>
<option value="Ahli Majlis">Ahli Majlis</option>
                                </select>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}

$('select[multiple]').multiselect({
  columns: 4,
  placeholder: 'Select options'
});
</script>

</body>
</html>

现在输出如下图：

其实我想要如下图的输出：

希望有人能指导我解决这个问题。谢谢

Answer 1

如果您拥有所有必需的库，那么您可以按以下方式使用 onChange：

$('select[multiple]').multiselect({
  columns: 2,
  placeholder: 'Select options',
  onChange: function(element, checked) {
    var options = $('#mySelect option:selected');
    var selected = [];
    $(options).each(function(index, brand){
        selected.push($(this).val());
    });
    $('#demo').text("You selected: " + selected.join(','));
  }
});

$('#demo').text("You selected: "+$('#mySelect').val());// to show the selected on page load

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<select id="mySelect" multiple class="form-control">
  <option value="Sila Pilih" selected>Sila Pilih</option>
  <option value="Kakitangan MPK">Kakitangan MPK</option>
  <option value="Ahli Majlis">Ahli Majlis</option>
</select>

<p id="demo"></p>

在文本中显示带有复选框值的多个 select 下拉列表

Show multiple select dropdown with checkboxes value in the text

html

javascript

jquery

html-select