Блог

Главная - Вопросы по программированию - Показать выпадающий список множественного выбора со значением флажков в тексте

Показать выпадающий список множественного выбора со значением флажков в тексте

#javascript #html #jquery #html-select

#javascript #HTML #jquery #html-выбрать

Вопрос:

У меня проблема с отображением выпадающего списка множественного выбора со значением флажков в тексте.

Ниже приведен пример кода:

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

Теперь вывод, как показано ниже на картинке:

Вывод 1

На самом деле, я хочу, чтобы результат был таким, как показано ниже на картинке:

Вывод 2

Надеюсь, кто-нибудь поможет мне решить эту проблему. Спасибо.

Ответ №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>