jquery - jQueryUI selectmenu - 如果另一个选择选择了某个选项,则禁用/启用选择
问题描述
对于这个问题,我使用的是官方示例的略微修改版本。
如果从选择菜单“选择速度”中选择的选项不是,我尝试停用Fast
选择菜单“选择标题” 。如果Fast
被选中,则应再次激活该选择。
试图:
$( function() {
$( "#speed" ).selectmenu();
$( "#salutation" ).selectmenu();
$speed = $('#speed');
$salutation = $('#salutation');
test();
$speed.on('selectmenuchange', function() {
test();
});
function test()
{
let selectedOption = $speed.find('option:selected').text().trim().toLowerCase();
if ( ! selectedOption.includes('fast')) {
$salutation.prop('disabled', 'disabled');
} else {
$salutation.removeAttr('disabled');
$salutation.next().find('.ui-selectmenu-text').trigger("click");
}
}
});
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
#
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="demo">
<form action="#">
<fieldset>
<label for="speed">Select a speed</label>
<select name="speed" id="speed">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
<label for="salutation">Select a title</label>
<select name="salutation" id="salutation">
<option disabled selected>Please pick one</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Dr.</option>
<option>Prof.</option>
<option>Other</option>
</select>
</fieldset>
</form>
</div>
但正如您所见,它并没有按预期工作。欢迎任何提示。
解决方案
我找到了解决方案。我不得不将功能更改为test()
:
function test()
{
let selectedOption = $speed.find('option:selected').text().trim().toLowerCase();
//Hide
if ( ! selectedOption.includes('fast')) {
$salutation.selectmenu('disable');
} else {
$salutation.selectmenu('enable');
}
}
$( function() {
$( "#speed" ).selectmenu();
$( "#salutation" ).selectmenu();
$speed = $('#speed');
$salutation = $('#salutation');
test();
$speed.on('selectmenuchange', function() {
test();
});
function test()
{
let selectedOption = $speed.find('option:selected').text().trim().toLowerCase();
//Hide
if ( ! selectedOption.includes('fast')) {
$salutation.selectmenu('disable');
} else {
$salutation.selectmenu('enable');
}
}
});
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="demo">
<form action="#">
<fieldset>
<label for="speed">Select a speed</label>
<select name="speed" id="speed">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
<label for="salutation">Select a title</label>
<select name="salutation" id="salutation">
<option disabled selected>Please pick one</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Dr.</option>
<option>Prof.</option>
<option>Other</option>
</select>
</fieldset>
</form>
</div>
推荐阅读
- c# - 使用循环概念从字符串中拆分运算符
- google-apps-script - 谷歌电子表格脚本 - 将值移动到特定单元格
- bash - 在 shell 脚本中使用“睡眠”功能时出现问题
- azure - “云端点创建失败”的一些问题
- python - ValueError:在系统中找不到外部 ID:todo_report.report_todo_task_template
- reactjs - 我们可以将sectionList(或滚动视图)的粘性标题粘贴到滚动视图顶部的相对位置吗?
- hyperledger-fabric - 超级账本的 fabcar.go 链码不接受更改和修改,始终运行以前的链码
- c# - 如何包含正确小数点的货币?
- sql-server - 在嵌套路径中返回多个值的 XML 查询
- azure - ADF 的 Azure Function 组件不适用于自托管集成运行时