Question

我正在尝试写一个函数。当我选中一个复选框时，项目属于该复选框项目进入下拉菜单，当我取消选中它时，它会离开dropdpwn。我可以添加，但是当我取消选中复选框时无法删除。这是我的代码。

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#",
];
    function checkboxChange(ev) {
        var count = items.length;
        var select = document.getElementById('formsec');
        for (var i = 0; i < count; i++){
            if (ev.value=="1001" &&ev.checked  ) {
                var item = items[i];
                var currentitem = item.split('#');
                if (currentitem[5]=="1" ) {
                    var opt = document.createElement('option');
                    opt.value = currentitem[1];
                    opt.innerHTML = currentitem[2];
                    select.appendChild(opt);
                }

HTML

<td>
    Choose the item: </br>          
    <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" />Category1<br />
    <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" />Category2<br />
    <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" />Category3<br />
</td>

Answer 1

使用querySelector和select.remove()的工作示例。

仅适用于Category 1因为OP条件：

if (ev.value == "1001")
if (currentitem[5] == "1")

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#",
];

function checkboxChange(ev) {
  var count = items.length;
  var select = document.getElementById('formsec');
  for (var i = 0; i < count; i++) {
    if (ev.value == "1001") {
      var item = items[i];
      var currentitem = item.split('#');
      if (currentitem[5] == "1") {
        if (ev.checked) {
          var opt = document.createElement('option');
          opt.value = currentitem[1];
          opt.innerHTML = currentitem[2];
          select.appendChild(opt);
        } else {
          var opt = document.querySelector("option[value='" + currentitem[1] + "']");
          select.remove(opt);
        }
      }
    }
  }
}

<select id="formsec"></select>
<td>
  Choose the item: <br />
  <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" /><label for="category1">Category1</label><br />
  <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" /><label for="category2">Category2</label><br />
  <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" /><label for="category3">Category3</label><br />
</td>

Answer 2

这可能会对你有所帮助。我没有数组实现它。对每个复选框使用关联标签。

function checkboxChange(ev) {
$('#formsec').html("");
$('input[type=checkbox]').each(function () {
  
   var chk = (this.checked ? $(this).val() : "");   
   if(chk){
    $('#formsec').append('<option value="'+chk+'" selected="selected">'+$("label[for='"+this.id+"']").text()+'</option>');
   }
   
 });
        
      
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Choose the item:<br />          
    <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" />
    <label for="category1">Category1</label>
    <br />
    <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" />
    <label for="category2">Category2</label>
    <br />
    <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" />
    <label for="category3">Category3</label>
</div>
<select id="formsec"></select>

Answer 3

相反在html中设置一个onChange处理程序我建议每次都绑定一个输入处理程序并重建selectbox，即使在文档加载上也是如此

pstatement.setBytes(1, array);

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#"
];

function rebuild() {
  var select = document.getElementById('formsec');
  select.innerHTML = "";

  [].forEach.call(document.querySelectorAll("input[type=checkbox]"), (el) => {
    if (el.checked) {
      var opt = document.createElement('option');
      var currentitem = items.find(
        (item) => item.startsWith("#" + el.value)
      ).split("#");
      opt.value = currentitem[1];
      opt.innerHTML = currentitem[2];
      select.appendChild(opt);
    }

  });
}

[].forEach.call(document.querySelectorAll("input[type=checkbox]"), (el) => {
  el.addEventListener("input", rebuild);
});

rebuild();

添加-remove选项到下拉菜单

3 个答案: