如何創建自動禁用 select 選項？

Question

我對選項 select 有一些問題。

如果用戶沒有選擇尺寸的 T 恤，我希望 select 選項自動禁用。 並且總訂購選項 select 最大訂單與庫存尺寸 T 恤相同。

考試：S 碼有 15 個庫存 尺碼 M 有 20 個庫存

並且在選項 select 中，最大訂單對應於尺寸 T 恤的庫存。 如果用戶選擇尺寸 s 選項 select 訂單自動最大數量為 15，用戶選擇尺寸 m 選項 select 訂單自動最大數量為 20。

關於從數據庫中獲取的股票數量

我將 codeigniter 與引導程序一起使用

這是我的代碼：Select 選項尺寸 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 訂單號

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

當我更改大小時，選項 select 編號沒有改變。 當我是 select “選擇尺寸”時，選項 select 編號訂單沒有禁用/只有 0 個庫存

Answer 1

您可以使用for-loop來禁用特定值的所有選項，該值將傳遞給 function，我們將在其中獲取選擇框中的選項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值傳遞給它，然后將 append 數據傳遞給某個變量，然后 append 這個數據使用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>