如何删除javascript中的选项

How to remove an option in javascript?

本文关键字：javascript 选项 删除 何删除      更新时间：2023-09-26

我不明白为什么这不起作用？不要删除小选项！

我有脚本：

<script>
var quantity_in_stock_s = 0

if ( quantity_in_stock_s === 0)
{
var S = document.getElementById("S");
document.getElementById("mySelect").removeChild(S);
}
</script>

和HTML:

<form>
<select id="mySelect">
<option id="S">Small</option>
<option id="M">Medium</option>
<option id="L">Large</option>
</select>
</form>

这错了吗？！！：

</head>
<body>

<form>
<select id="mySelect">
  <option id="S">Small</option>
  <option id="M">Medium</option>
  <option id="L">Large</option>
</select>
</form>
<script>
   var quantity_in_stock_S = 0
   var quantity_in_stock_M = 0
   var quantity_in_stock_L = 0
function deleteOption1(){
      if ( quantity_in_stock_S === 0)
   {
     var S = document.getElementById("S");
     document.getElementById("mySelect").removeChild(S);
   }
}
function deleteOption2(){
      if ( quantity_in_stock_M === 0)
   {
     var M = document.getElementById("M");
     document.getElementById("mySelect").removeChild(M);
   }
}
function deleteOption3(){
      if ( quantity_in_stock_L === 0)
   {
     var L = document.getElementById("L");
     document.getElementById("mySelect").removeChild(L);
   }
}

window.onload = deleteOption1;
window.onload = deleteOption2;
window.onload = deleteOption3;

</script>

它应该是window.onload = deleteOption;而不是window.load = deleteOption;

如果事实如此，这里有一个修改后的脚本：

<form>
  <select id="mySelect">
    <option id="S">Small</option>
    <option id="M">Medium</option>
    <option id="L">Large</option>
  </select>
</form>
<script type="text/javascript">
  var quantity_in_stock_S = 0
  var quantity_in_stock_M = 0
  var quantity_in_stock_L = 0
  function deleteOptions() {
   if ( quantity_in_stock_S === 0) {
     var S = document.getElementById("S");
     document.getElementById("mySelect").removeChild(S);
   }
   if ( quantity_in_stock_M === 0) {
     var M = document.getElementById("M");
     document.getElementById("mySelect").removeChild(M);
   }
   if ( quantity_in_stock_L === 0) {
     var L = document.getElementById("L");
     document.getElementById("mySelect").removeChild(L);
   }
  }
  window.onload = function() {
    deleteOptions();
  };
</script>

或者。。。如果你想去Object Oriented:

  <form>
      <select id="mySelect">
        <option id="S">Small</option>
        <option id="M">Medium</option>
        <option id="L">Large</option>
      </select>
    </form>
    <script type="text/javascript">
      var Stocks = {
        SmallStock: 0,
        MediumStock: 0,
        LargeStock: 0,
        StockCheck: function() {
          if (Stocks.SmallStock === 0) {
            var S = document.getElementById("S");
            document.getElementById("mySelect").removeChild(S);
          }
          if (Stocks.MediumStock === 0) {
            var M = document.getElementById("M");
            document.getElementById("mySelect").removeChild(M);
          }
          if (Stocks.LargeStock === 0) {
            var L = document.getElementById("L");
            document.getElementById("mySelect").removeChild(L);
          }
        }
      };
      window.onload = function() {
        Stocks.StockCheck();
      };
    </script>

我认为您需要创建一个函数，然后根据您的需求在窗口加载或时调用该函数：

function deleteOption(){
   var quantity_in_stock_s = 0
   if ( quantity_in_stock_s === 0)
   {
     var S = document.getElementById("S");
     document.getElementById("mySelect").removeChild(S);
   }
}
window.load = deleteOption;

如果您的代码不工作，原因是您将它放在<head></head>标记之间，而没有将它绑定到窗口/文档加载事件（window.onload）。

尝试将相同的代码放在</body>结束标记之前。别忘了把它放在<script></script>标签之间。

相关文章：