javascript - 多个选择的复选框下拉列表由 ; 分隔

Question

我正在尝试从下拉列表中创建一个多选复选框，并通过 ; 连接所选结果。

我的代码是这样的:

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>

Answer 1

查看函数 selectedValue()，当选择更改其值时会触发该函数。此外，对于多个值，您必须将 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>