如何删除javascript中的选项？_Javascript_Html

如何删除javascript中的选项？

javascript html

如何删除javascript中的选项？,javascript,html,Javascript,Html,我不明白这为什么不起作用？不要删除小选项 </head> <body> <form> <select id="mySelect"> <option id="S">Small</option> <option id="M">Medium</option> <option id="L">Large</option> </select> </for

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

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

我有剧本：

<script>
var quantity_in_stock_s = 0


if ( quantity_in_stock_s === 0)
{

var S = document.getElementById("S");
document.getElementById("mySelect").removeChild(S);

}

</script>

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

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

这不对吗

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

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

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

如果代码不工作，原因是您将代码放在标记之间，而没有将其绑定到窗口/文档加载事件

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

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

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

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

这似乎对我有用：它在起作用……快！更多的JsFiddles！将脚本移动到渲染标记下方。。。不应该影响执行，但至少是一致的。@maxmitch您是否按照我的回答将window.load更改为window.onload？它仍然不起作用吗？我想知道他为什么需要创建一个函数。这可能是一个匿名函数，也可能根本不是函数。