I want to select items and their quantity. the item is already in database so it will see in checkbox and I want to add corresponding quantity I dont know how to implement. if another way is better than this please answer me .
eg: A multiple select box contain
Apple, Banana, Cherry
want to select quantity too
apple >>>> quantity 2
cherry >>>> quantity 3
answer with example
Would this help?
const sel = document.getElementById("item");
const qtyDiv = document.getElementById("qtyDiv");
const qtys = qtyDiv.querySelectorAll("label");
const show = () => {
const vals = [...sel.options].filter(option => option.selected).map(option => option.value);
console.log(vals)
qtys.forEach(qty => {
qty.style.visibility = vals.includes(qty.id) ? "visible": "hidden";
})
};
sel.addEventListener("click",show)
show()#parent {
display: flex;
}
.narrow {
width: 200px;
height: 150px
background: lightblue;
}
.wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
.wide label {
display: block;
visibility: hidden;
}
#item { height: 50px; border: none; }<div id="parent">
<div class="narrow">
<select id="item" multiple size="2">
<option value="apple">Apples</option>
<option value="banana">Bananas</option>
</select>
</div>
<div id="qtyDiv" class="wide">
<label id="apple">How many apples?<input type"number" name="apples" /></label>
<label id="banana">How many bananas?<input type"number" name="bananas" /></label>
</div>
</div>