时间戳

首页 > 解决方案 > 如何创建自动禁用选择选项？

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

问题描述

我对选项选择有一些问题。

如果用户没有选择尺码 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 个库存

标签： javascriptphpjqueryajaxcodeigniter

解决方案

您可以使用for-loop从特定值禁用所有选项，该值将传递给一个函数，我们将在该函数中获取lengthselect-box 中的选项，然后在循环下使用这个来禁用 select-box 中的选项。

演示代码：

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>

推荐阅读