javascript - 如何使用 Jquery 控制下拉选择选项菜单
问题描述
我正在创建一个网站。在这个网站上有一个表格,用户必须输入详细信息。所以,在这种形式中,我添加了 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>
解决方案
您只需将长度更改为
if (st.val() > 8)
演示:https ://codepen.io/creativedev/pen/ERpXOa
要在值不同时重新启用:
if (st.val() > 8)
{
$("#children").prop('disabled', true);
}else{
$("#children").prop('disabled', false);
}
推荐阅读
- reactjs - NPM 包尝试写入文档并失败
- c++ - 玩 Bazel C++ 教程;build 不创建/使用共享库?
- javascript - 选择表格中的填充单元格
- python - 将 Pandas 数据框中列表中的单词词形化
- jquery - 禁用 JQuery 后无法重新启用选择标记
- javascript - Phaser 3 具有随机 x,y 但在特定区域的精灵
- php - 为什么在我的模型上调用“find”方法会导致此错误:“App\Post 类的对象无法转换为 int”?
- python - Python:如果没有 XML 标记,则打印“空白”以及输出
- instagram - Instagram 获取带有标签的帖子
- python - 从 excel 中获取数据并使用 Python 3.6 对其进行排序的最佳方法