Question

我有一些下拉菜单，我想隐藏值550282，如果客人数量大于2并显示客人数量小于或等于2。

Guest Count由以下JavaScript函数添加。

这可以通过jQuery还是有另一种方法？已经存在剪切代码，还有[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>

Answer 1

简单地说，您可以按document.getElementById("toremove").style.display="none";隐藏选择，当访客数量<= 2时，document.getElementById("toremove").style.display="";会显示出来。

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

Answer 2

我看到你正在使用jquery，所以你可以在输入上添加onchange事件： https://api.jquery.com/change/

然后值只是抓住你的选项（例如：How to get all options of a select using jQuery?）并依赖于你的隐藏与否。

选择隐藏，并在计数器更改时显示

2 个答案: