Question

我正在创建一个网站。该网站中有一个表格，用户必须输入详细信息。因此，以这种形式，我添加了2个如下所示的下拉菜单。现在，我想从成人菜单中选择数字9时，要禁用儿童菜单。否则，如果数字是8或小于8，则仍然可以从子菜单中进行选择。然后我在jQuery中使用了长度。但是，那不是我想要的。

我该怎么做？

$(document).ready(function() {

  var adults = parseFloat($('#adults').val());
  var children = parseFloat($('#children').val());
  var infants = $('#infants').val();
  var Total = adults + children;
  //$("#errorModal").html(Total);

  $('#adults').change(function() {
    var st = $('#adults option:selected');
    if (st.length > 8) {
      $("#children").prop('disabled', true);
    }
  });

  alert(Total);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">

  <div class="col-md-4 col-sm-12 hero-feature">
    <!-- Start Of The Col Class -->
    Adults :
    <select name="adults" class="form-control" id="adults">
      <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>
    </select> <br>
  </div>

  <div class="col-md-4 col-sm-12 hero-feature">
    <!-- Start Of The Col Class -->
    Children :
    <select name="children" class="form-control" id="children">
      <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>
    </select> <br>

  </div>

  </div>

  <a href="#" id="ghsubmitbtn" class="btn btn-success">Search Flight Data</a>

</form>

Answer 1

您只需要将长度更改为

 if (st.val() > 8)

演示：https://codepen.io/creativedev/pen/ERpXOa

要在值不同时启用回退：

if (st.val() > 8)
{
     $("#children").prop('disabled', true);
}else{
     $("#children").prop('disabled', false);
}

Answer 2

您应该检查所选的值，而不是长度：

var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);

$('#adults').change(function() {
  if (this.value > 8) {                     // check against the value of the adults drop down
    $("#children").prop('disabled', true);
  } else {
    $("#children").prop('disabled', false);  // probably need to re-enable it
  }
});

// alert(Total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">

  <div class="col-md-4 col-sm-12 hero-feature">
    <!-- Start Of The Col Class -->
    Adults :
    <select name="adults" class="form-control" id="adults">
      <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>
    </select> <br>
  </div>

  <div class="col-md-4 col-sm-12 hero-feature">
    <!-- Start Of The Col Class -->
    Children :
    <select name="children" class="form-control" id="children">
      <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>
    </select> <br>

  </div>

  </div>

  <a href="#" id="ghsubmitbtn" class="btn btn-success">Search Flight Data</a>

</form>

如何使用Jquery控制下拉菜单选择选项菜单

2 个答案: