J'ai une instruction de sélection dans laquelle je peux sélectionner une valeur à la fois, j'essaie de créer une case à cocher pour la sélection multiple. Mes valeurs de liste déroulante proviennent du backend. Je ne peux utiliser aucun plugin d'amorçage. Ci-dessous le code, y a-t-il de toute façon pour y parvenir avec peu de modifications du code. Toute aide sera appréciée.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="test">
<select id="student">
<option selected="selected" value="default">select here</option>
</select>
</td>
</tr>
</table>
function selectMultiple(studentList) {
for (var i = 0; i < studentList.length; i++) {
let studentVal = studentList[i];
$("#student").append('<option value="' + studentVal + '">' + studentVal + '</option>');
}
}
//studentlist coming from backend
var studentList = ['A', 'B', 'C'];
selectMultiple(studentList);
4 Réponses :
Essayez ceci Mettez ces détails que vous obtenez du backend, dans un tableau (comme un tableau assosiatif), puis passez-le au frontend. Accédez ensuite aux éléments du tableau au frontend. Ex: ">
Essayez de modifier votre sélection pour ceci:
Vous devriez alors pouvoir maintenir le bouton Ctrl enfoncé et sélectionner plusieurs valeurs
une autre façon d'obtenir des cases à cocher
Vous pouvez simplement utiliser la balise
déroulante , également dans le code ci-dessous, j'ai utilisé . one ("click", function () .. pour qu'il n'y ait pas plusieurs append .
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="test">
<ul id="student">
<li id="s1" selected="selected" value="default">Select here</li>
</ul>
</td>
</tr>
</table>
ul li:hover, ul li:focus {
color:red;
}
li{
list-style: none;
}
$("#s1").one("click",function(){
for (var i = 0; i < studentList.length; i++) {
let studentVal = studentList[i];
$("#student").append('<li value="' + studentVal + '">' +'<input type="checkbox">'+ studentVal + '</li>');
}
});
//studentlist coming from backend
var studentList = ['A', 'B', 'C'];
Voici l'extrait de code pour avoir des cases à cocher dans une liste déroulante.
<div class="multipleSelect">
<div class="selectBox" onclick="showMultipleCheckbox()">
<select>
<option>Select a checkbox</option>
</select>
<div class="selectionBox"></div>
</div>
<div id="multipleCheckbox">
<label for="one">
<input type="checkbox" id="one" />Check box1</label>
<label for="two">
<input type="checkbox" id="two" />Check box2</label>
<label for="three">
<input type="checkbox" id="three" />Check box3</label>
</div>
</div>
<script>
var selectTagOpen = false;
function showMultipleCheckbox() {
var checkboxes = document.getElementById("multipleCheckbox");
if (!selectTagOpen) {
checkboxes.style.display = "block";
selectTagOpen = true;
} else {
checkboxes.style.display = "none";
selectTagOpen = false;
}
}
</script>
.multipleSelect {
width: 130px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: auto;
}
.selectionBox {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#multipleCheckbox {
display: none;
border: 1px solid;
}
#multipleCheckbox label {
display: block;
}
#multipleCheckbox label:hover {
background-color: #42ecf5;
}
Où est le code HTML de votre case à cocher?
Modification minimale:
Krishna td with id test est le code HTML
@ user10806781 Krishna fait référence à votre demande de " créer une case à cocher pour la sélection multiple ". Il n'y a pas de "case à cocher pour la sélection multiple" dans votre HTML, juste un
- si vous cherchez à créer une liste déroulante avec des cases à cocher, alors ce n'est pas exactement une seule ligne et vous ' Il vaut mieux utiliser un plugin jquery.liberté, l'utilisation de plusieurs fonctionnera mais cela ne me donnera pas de cases à cocher, comment puis-je obtenir des cases à cocher en utilisant le plugin jquery