將選項值限制爲最大值

Question

我想限制包含產品數量的產品尺寸的select元素。

當用戶選擇一個尺寸（例如16）我想設置$(orderqty)最大數量被選爲1.其餘選項可以被禁用。

我的HTML代碼：

<select name="qty" id="orderqty"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</select> 

<ul class="productinfoul"> 
    <li> 
    <div class="size " title="Size : 16" id="17.99" data-stock="1">16</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 18" id="17.99" data-stock="1">18</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 20" id="17.99" data-stock="1">20</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 22/24" id="17.99" data-stock="2">22/24</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 26/28" id="17.99" data-stock="2">26/28</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 30/32" id="17.99" data-stock="2">30/32</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 34/36" id="17.99" data-stock="1">34/36</div> 
    </li> 
</ul> 

jQuery代碼：

$('.size').click(function(e) { 
    maxval = $(this).attr('data-stock'); 
    var selected = $('#orderqty option:selected').text() 
    if(maxval < selected){ 
     alert("You can only select maximum of "+maxval+" for this product"); 
     $("#orderqty").val(maxval).change(); 
    } 
}); 

但是，如果用戶選擇質量第一，則產品尺寸這隻作品。

謝謝。

Answer 1

這應該是你在找什麼。

這將只允許用戶選擇從select如果等於或小於設定值，從data-stock

$('.size').click(function(e) { 
 
    var maxval = $(this).attr('data-stock'); 
 
    $("#orderqty option").each(function(i, x) { 
 
    if (parseInt($(x).text()) > maxval) { 
 
     $(x).prop("disabled", true) 
 
    } else { 
 
     $(x).prop("disabled", false) 
 
    } 
 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="qty" id="orderqty"> 
 
<option>1</option> 
 
<option>2</option> 
 
<option>3</option> 
 
<option>4</option> 
 
<option>5</option> 
 
<option>6</option> 
 
<option>7</option> 
 
<option>8</option> 
 
<option>9</option> 
 
<option>10</option> 
 
</select> 
 

 
<ul class="productinfoul"> 
 
    <li> 
 
    <div class="size " title="Size : 16" id="17.99" data-stock="1">16</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 18" id="17.99" data-stock="1">18</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 20" id="17.99" data-stock="1">20</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 22/24" id="17.99" data-stock="2">22/24</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 26/28" id="17.99" data-stock="2">26/28</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 30/32" id="17.99" data-stock="2">30/32</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 34/36" id="17.99" data-stock="1">34/36</div> 
 
    </li> 
 

 
</ul>

Answer 2

一些可以禁用不相關的選項，這取決於其中大小選項被點擊。最初，您可以禁用所有選項，以便用戶首先需要單擊size元素之一。

$('.size').click(function(e) { 
 
var maxval = parseInt($(this).attr('data-stock')); 
 
$("#orderqty option").each(function(){ 
 
    var curValue = parseInt($(this).text()); 
 
    if(curValue <= maxval){ 
 
    $(this).prop("disabled", false); 
 
    }else{ 
 
    $(this).prop("disabled", true); 
 
    } 
 
});//each() 
 
}); 
 

 

 
//Initially disable all options 
 
$("#orderqty option").each(function(){ 
 
    $(this).prop("disabled", true); 
 
});//each()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select name="qty" id="orderqty"> 
 
<option>1</option> 
 
<option>2</option> 
 
<option>3</option> 
 
<option>4</option> 
 
<option>5</option> 
 
<option>6</option> 
 
<option>7</option> 
 
<option>8</option> 
 
<option>9</option> 
 
<option>10</option> 
 
</select> 
 

 
<ul class="productinfoul"> 
 
<li><div class="size " title="Size : 16" id="17.99" data-stock="1">16</div></li> 
 
<li><div class="size " title="Size : 18" id="17.99" data-stock="1">18</div></li> 
 
<li><div class="size " title="Size : 20" id="17.99" data-stock="1">20</div></li> 
 
<li><div class="size " title="Size : 22/24" id="17.99" data-stock="2">22/24</div></li> 
 
<li><div class="size " title="Size : 26/28" id="17.99" data-stock="2">26/28</div></li> 
 
<li><div class="size " title="Size : 30/32" id="17.99" data-stock="2">30/32</div></li> 
 
<li><div class="size " title="Size : 34/36" id="17.99" data-stock="5">34/36</div></li> 
 

 
      </ul>