Question

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

我有脚本：

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

Answer 1

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

Answer 2

如果确实如此，这是一个经过修改的脚本：

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

Answer 3

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

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;

Answer 4

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

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

如何在javascript中删除选项？

4 个答案: