Блог

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

выпадающий список флажков для множественного выбора, разделенный ;

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать флажок множественного выбора из выпадающего списка и получить выбранные результаты, объединенные с помощью ; .

мой код выглядит следующим образом: 

 var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C',
    ValueD : 'Text D',
    ValueE : 'Text E',
    ValueF : 'Text F'
};
var select = document.getElementById("rec_mode");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}  
 <select id="rec_mode">        
</select>

Ответ №1:

Просмотрите функцию selectedValue() , которая запускается, когда select изменяет свое значение. Кроме того, для нескольких значений вы должны добавить multiple атрибут к тегу select.

 var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C',
    ValueD : 'Text D',
    ValueE : 'Text E',
    ValueF : 'Text F'
};
var select = document.getElementById("rec_mode");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}

function selectedValue() {
  var selectChilds = document.getElementById("rec_mode").childNodes;
  var selectedValues = "";
  
  for(var i = 0; i < selectChilds.length; i  ){
    if(selectChilds[i].selected){
      selectedValues  = selectChilds[i].value   ";";
    }
  }
  
  alert(selectedValues.substring(0, selectedValues.length -1));
}  
 <select id="rec_mode" multiple onchange="selectedValue()">        
</select>

Редактировать

Если вы хотите написать код с checkbox тегами, следуйте этому фрагменту.

 var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C',
    ValueD : 'Text D',
    ValueE : 'Text E',
    ValueF : 'Text F'
};
var chbxs = document.getElementById("rec_mode");
for(index in myobject) {
    chbxs.innerHTML  = '<input type="checkbox" value="'   index   '" /> '   myobject[index]   '<br />'
}

function selectedValue() {
  var selectChilds = document.getElementById("rec_mode").childNodes;
  var selectedValues = "";
  
  for(var i = 0; i < selectChilds.length; i  ){
    if(selectChilds[i].checked){
      selectedValues  = selectChilds[i].value   ";";
    }
  }
  
  document.getElementById("result").textContent = selectedValues.substring(0, selectedValues.length -1);
}  
 <div id="rec_mode" onchange="selectedValue()">        
  
</div>

<p id="result"></p>

Комментарии:

1. спасибо за ответ! не могли бы вы помочь с тем, как добавить флажок в сторону от опций?

2. Добро пожаловать. Добавление флажка в сторону тегов опций изменит структуру HTML, потому что вам придется удалить select / option тег и использовать checkbox теги. Используя только HTML, вы не можете добавить checkbox в сторону option внутри select . Итак, если вы хотите новое решение с этими неудобствами, я помогу вам на этом пути.

3. Привет, Юлио, я был бы признателен, если бы ты мог помочь таким образом

4. Привет @johnbrandes, просмотрите новый раздел ответа, я надеюсь, это поможет вам.

Ответ №2:

Возможно, это наполовину ответ, но он может вам помочь 🙂

  var myobject = {
  ValueA : 'Text A',
  ValueB : 'Text B',
  ValueC : 'Text C',
  ValueD : 'Text D',
  ValueE : 'Text E',
  ValueF : 'Text F'
};
  
$(document).ready(function() {
  for(index in myobject) {
    var temp ="<li><input type='checkbox' value='" index "' />" index "</li>"
    document.getElementById("listOfCheckbox").innerHTML  =temp;
  }
});  
 <div class="mutliSelect">
      <ul id="listOfCheckbox"></ul>
</div>