Select option hide and show when counter changes
Question
I have some dropdown menu where I want to hide value 550282, if amount of guests is greater to 2 and show when amount of guest is less or equal to 2.
Guest Count is added by JavaScript functions below.
Is this possible through jQuery or there is another method? Snipped code is there and also the [fiddle](https://jsfiddle.net/u3cbntb3/14/).
var hostAmount = 1; var hosts = [1]; function getSelect(index) { var retHTML = '<span class="label">Host ' + (index + 1) + ': </span><select name="host' + (index + 1) + '" id="host' + (index + 1) + '">'; if (hosts[index] == 1) retHTML += '<option value="1" selected="selected">Dospělý</option><option value="2" >Dítě do 15</option><option value="3">Dítě do 10</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>'; else retHTML += '<option value="1">Dospělý (130Kč)</option><option value="2" selected="selected">Dítě do 15(130Kč)</option><option value="3">Dítě do 10(1Kč)</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>'; if (index != 0) retHTML += '<span class="delete" onclick="deleteHost(' + index + ');">Smazat</span><br />'; else retHTML += '<br />'; return retHTML; } function saveValues() { for (var i = 1; i < hostAmount; i++) hosts[i] = document.getElementById("host" + (i + 1)).value; } function actualSelects() { var HTMLbuff = ""; for (var i = 0; i < hosts.length; i++) HTMLbuff += getSelect(i); document.getElementById("personBox").innerHTML = HTMLbuff; document.getElementById("amount").value = hostAmount; } function addHost() { saveValues(); hosts.push(1); hostAmount++; actualSelects(); } function deleteHost(index) { hosts.splice(index, 1); hostAmount--; actualSelects(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body onload="actualSelects()"> <form> <span class="label">Guest Count: </span><input readonly name="amount" id="amount" type="number" value="1" min="1" /><br /> <div id="personBox"> </div> <span id="addPerson" onclick="addHost();">Add Host</span><br /> <span>Option</span> <select name="room-type" class="dropdown-list"> <option id="toremove" selected="selected" value="550282">550282</option> <option value="550280">550280</option> <option value="557786">557786</option> <option value="550284">557786</option> </select> </form> </body> </html>
1 answers
solution1
0 2018-03-08 20:04:29
Simply, you can hide the selection by document.getElementById("toremove").style.display="none"; , then show it up by document.getElementById("toremove").style.display=""; when guest count <=2.
var hostAmount = 1; var hosts = [1]; function getSelect(index) { var retHTML = '<span class="label">Host ' + (index + 1) + ': </span><select name="host' + (index + 1) + '" id="host' + (index + 1) + '">'; if (hosts[index] == 1) retHTML += '<option value="1" selected="selected">Dospělý</option><option value="2" >Dítě do 15</option><option value="3">Dítě do 10</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>'; else retHTML += '<option value="1">Dospělý (130Kč)</option><option value="2" selected="selected">Dítě do 15(130Kč)</option><option value="3">Dítě do 10(1Kč)</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>'; if (index != 0) retHTML += '<span class="delete" onclick="deleteHost(' + index + ');">Smazat</span><br />'; else retHTML += '<br />'; return retHTML; } function saveValues() { for (var i = 1; i < hostAmount; i++) hosts[i] = document.getElementById("host" + (i + 1)).value; } function actualSelects() { var HTMLbuff = ""; for (var i = 0; i < hosts.length; i++) HTMLbuff += getSelect(i); document.getElementById("personBox").innerHTML = HTMLbuff; document.getElementById("amount").value = hostAmount; } function addHost() { saveValues(); hosts.push(1); hostAmount++; actualSelects(); if(hostAmount>2) { document.getElementById("toremove").style.display="none"; document.getElementById("toselect").value = ""; //reset the value of select } else{ document.getElementById("toremove").style.display=""; } } function deleteHost(index) { hosts.splice(index, 1); hostAmount--; actualSelects(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body onload="actualSelects()"> <form> <span class="label">Guest Count: </span><input readonly name="amount" id="amount" type="number" value="1" min="1" /><br /> <div id="personBox"> </div> <span id="addPerson" onclick="addHost();">Add Host</span><br /> <span>Option</span> <select name="room-type" class="dropdown-list" id="toselect"> <option id="toremove" selected="selected" value="550282">550282</option> <option value="550280">550280</option> <option value="557786">557786</option> <option value="550284">557786</option> </select> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Is there a way to show/hide some option and show/hide others in a select when an option is selected in a different select?
Hide and show select option based on select option
How to show a div when a select option is selected and hide when unselected?
How to use jQuery hide and show effect when using select option
Hide/Show <option> in select element when another option in another select is selected
Hide Show select based on another select option
How to make it so when I select one option, it will show one option and hide the other
Two Select option Changes When One select box option changes
Aurelia - Show/Hide element based on select option
JavaScript to hide and show form using select option
Related Tags