如何创建自动禁用选择选项？

Question

我对选项选择有一些问题。如果用户没有选择 T 恤尺寸，我希望选择选项自动禁用。在总订单中，选项选择与库存尺寸 T 恤相同的最大订单。考试：尺码 S 有 15 个库存 尺码 M 有 20 个库存并在选项中选择与 T 恤尺码库存相对应的最大订单。如果用户选择尺寸 s 选项选择订单自动最大数量为 15，并且用户选择尺寸 m 选项选择订单自动最大数量为 20。关于从数据库中获取的库存数量我将 codeigniter 与 bootstrap 一起使用这是我的代码：选择选项尺码 T 恤<?php$sprod = $stok['stok_s'];$mprod = $stok['stok_m'];$lprod = $stok['stok_l'];if ($sprod == 0 && $mprod != 0 && $lprod != 0) {    echo '<select name=produk_size id=produk_size class=form-control onchange=proses_stok() style=width:95%>    <option value=0>Select Size:</option>    <option value=stok_s disabled>s</option>    <option value=stok_m>m</option>    <option value=stok_l>L</option>    </select>';    ?>选项 选择订单号<select name="produk_stok" id="produk_stok" class="form-control" style="width:95%">    <?php    $stok_prod = $stok['stok_s'] + $stok['stok_m'] + $stok['stok_l'];    if ($stok_prod == 0 )    {        echo "<option value=0> 0 </option>";    }    else{        for($a=$stok['min_buy'];            $a<=$stok['stok']; $a+=1)        {           echo "<option value=$a>$a</option>";      }  }  ?></select> JavaScript<script type="text/javascript">    function proses_stok(){        var produk_stock = document.getElementById("produk_size").value;        document.getElementById("produk_stock").value=produk_stock;    }</script>当我更改大小时，选项选择编号没有更改。当我选择“选择尺码”时，选择编号订单选项并未禁用/只有 0 个库存

Answer 1

您可以使用for-loop特定值禁用所有选项，该值将传递给一个函数，在该函数中我们将获取length选择框中的选项，然后使用此循环来禁用选择框中的选项。

演示代码：

function proses_stok() {

  var produk_stock = document.getElementById("produk_size").value;

  document.getElementById("produk_stok").value = produk_stock;

  //if value is small

  if (produk_stock == "stok_s") {

    disable_values(15); //disable from

  } else if (produk_stock == "stok_m") {

    disable_values(20); //disable from

  } else {

    //enable all options

    $("#produk_stok option").prop('disabled', false);

  }

}

function disable_values(start) {

  var s = document.getElementById("produk_stok");

  var end = s.options.length; //getting length of option

  //first enabled all options

  $("#produk_stok option").prop('disabled', false);

  //loop through all options

  for (var i = start; i < end; i++) {

    s.options[i].disabled = true; //disabled 

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name=produk_size id=produk_size class=form-control onchange=proses_stok() style=width:95%>

  <option value=0>Select Size:</option>

  <option value=stok_s>s</option>

  <option value=stok_m>m</option>

  <option value=stok_l>L</option>

</select>

<select name="produk_stok" id="produk_stok" class="form-control" style="width:95%">

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

  <option value="5">5</option>

  <option value="6">6</option>

  <option value="7">7</option>

  <option value="8">8</option>

  <option value="9">9</option>

  <option value="10">10</option>

  <option value="11">11</option>

  <option value="12">12</option>

  <option value="13">13</option>

  <option value="14">14</option>

  <option value="15">15</option>

  <option value="16">16</option>

  <option value="17">17</option>

  <option value="18">18</option>

  <option value="19">19</option>

  <option value="20">20</option>

  <option value="21">21</option>

  <option value="22">22</option>

  <option value="23">23</option>

  <option value="24">24</option>

  <option value="25">25</option>

</select>

更新1：

要添加选项直到特定值，您可以使用for循环将end值传递给它，然后将数据附加到某个变量，然后使用innerHTML在选择框下显示来附加此数据。

演示代码：

function proses_stok() {

  var produk_stock = document.getElementById("produk_size").value;

  //if value is small

  if (produk_stock == "stok_s") {

    disable_values(15); //add till this option

  } else if (produk_stock == "stok_m") {

    disable_values(20); //add till this option

  } else if(produk_stock == "0") {

    document.getElementById("produk_stok").innerHTML = "<option value='0'>0</option>";

  }else{

  //if large size select

  //do somthing ..

  }

}

function disable_values(end) {

  var s = document.getElementById("produk_stok");

 var data="";

  //loop through all options

  for (var i = 1; i <= end; i++) {

  //append options

  data +="<option value="+i+">"+i+"</option>";

  }

  //add data to select box

 s.innerHTML= data;

  

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name=produk_size id=produk_size class=form-control onchange=proses_stok() style=width:95%>

  <option value=0>Select Size:</option>

  <option value=stok_s>s</option>

  <option value=stok_m>m</option>

  <option value=stok_l>L</option>

</select>

<select name="produk_stok" id="produk_stok" class="form-control" style="width:95%">

 <option value="0">0</option>

</select>