将选项值限制为最大值

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>