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

这应该是你要找的。

只有当byte[]的数字等于或小于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>

将选择选项值限制为最大值

2 个答案: