J'essaie d'écrire dans une fonction. Lorsque je coche une case à cocher, les éléments appartiennent à cet élément de case à cocher vient dans le menu déroulant, et quand je la décoche, il s'éloigne du dropdpwn. Je peux ajouter, mais je ne peux pas supprimer lorsque je décoche la case à cocher. Voici mon code.

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>
1
tom 16 avril 2018 à 14:55

3 réponses

Meilleure réponse

Exemple de travail utilisant querySelector et select.remove().

Fonctionne uniquement avec Category 1 car les conditions 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>
2
raul.vila 16 avril 2018 à 12:20

Au lieu de définir un gestionnaire onChange en html, je recommanderais de lier un gestionnaire d'entrée et de reconstruire la boîte de sélection à chaque fois, même lors du chargement de documents comme

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();
Choose the item:<br>
<input type="checkbox" id="category1" name="choice" value="1001">Category1<br>
<input type="checkbox" id="category2" name="choice" value="1002" checked>Category2<br>
<input type="checkbox" id="category3" name="choice" value="1003">Category3<br>

<select id="formsec"></select>
0
Joschi 16 avril 2018 à 12:28

Cela peut vous aider. J'implémente cela sans tableau. Utilisez une étiquette associée à chaque case à cocher.

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>
1
Deepu Reghunath 17 avril 2018 à 04:07