如何创建自动禁用选择选项？
我对选项选择有一些问题。
如果用户没有选择 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 个库存
宝慕林42943921回答
-
鸿蒙传说
您可以使用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>
随时随地看视频慕课网APP
PHP