jQuery - 如果count大于X，则删除选项

问题描述 投票：0回答：4

我有一些下拉菜单，我想删除值550282，如果客人数量大于2例如。 Guest Count由下面的javasrcipt函数添加，它也是可删除的。我只需删除该值，如果Guest数量大于2.这可以通过jQuery还是有另一种方法？剪切代码在那里，还有fiddle.

谢谢您的回答。

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>
javascript jquery html select
4个回答
0
投票

您可以通过将此代码添加到addHost（）函数来实现此目的

let elem = document.getElementById('toremove');
if (hosts.length > 2 && elem) {
    elem.parentNode.removeChild(elem);
}
0
投票

在函数addHost中添加以下代码

$(".dropdown-list option").each(function() {
  if (hostAmount > 2 && this.id && this.id === "toremove") {
    this.remove();
  }
});

下面添加工作样品

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  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();

    $(".dropdown-list option").each(function() {
      if (hostAmount > 2 && this.id && this.id === "toremove") {
        this.remove();
      }
    });
  }

  function deleteHost(index) {
    hosts.splice(index, 1);
    hostAmount--;
    actualSelects();
  }
</script>
</head>



<body onload="actualSelects()">
  <form>
    <span class="label">Guest Count: </span>
    <input readonly name="amount" id="amount" type="number" value="2" 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="557786">557786</option>
      <option value="550284">557786</option>
    </select>
  </form>

</body>

</html>
0
投票

您可以使用jQuery更改功能。

每当您更改访客计数时，此功能都将执行。

  1. 如果它大于2，则使用remove（）从选择列表中删除指定的项目。 2.删除后只需更新选择使用 $(".dropdown-list").trigger("chosen:updated");

和脚本为

   $("#amount").change(function(){
       var guestCount = $("#amount").val();
       if(guestCount > 2 ){
             var itemtoRemove = 550282;
              $(".dropdown-list option[value='" + itemtoRemove + "']").remove();
              $(".dropdown-list").trigger("chosen:updated");
        }
    });
0
投票

试试这个：

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

// A $( document ).ready() block.
$(document).ready(function() {
  jQuery('#amount').on('change', function(event) {
    var guestCount = $("#amount").val();
    if (guestCount > 2) {
      removeOption('550282');
    }
  });

});

function removeOption(value) {
  jQuery('option[value="' + value + '"]').each(function() {
    jQuery(this).remove();
  })
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.