jquery-ui - jQueryUI selectmenu - 设置选择的选项
问题描述
如何在 jQueryUI 选择菜单上设置选定选项?
我尝试在下面的屏幕截图中将第二个下拉列表的值设置为“Prof”,然后再禁用它。
我试过这样:
$salutation.find('option').filter(function() {
return ($(this).text().includes('Prof'));
}).prop('selected', true);
像这样:
$salutation.find('option').each(function() {
var optionText = $(this).text();
if (optionText.includes('Prof'))
$(this).prop('selected', true);
});
没有工作。
完整示例:
$( 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.find('option').filter(function() {
return ($(this).text().includes('Prof'));
}).prop('selected', true);
$salutation.selectmenu('disable');
$salutation.selectmenu('refresh');
} 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>
解决方案
我找到了解决方案。我不得不打电话$salutation.selectmenu('refresh');
后$salutation.selectmenu('disable');
http://api.jqueryui.com/selectmenu/#method-refresh
$( 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.find('option').filter(function() {
return ($(this).text().includes('Prof'));
}).prop('selected', true);
$salutation.selectmenu('disable');
$salutation.selectmenu('refresh');
} 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>
推荐阅读
- typescript - 条件类型与映射类型组合时的奇怪语法
- spring-boot - 多重联接以排除第二个联接中的第一个联接的结果
- c# - 并行测试中的 NUnit 分组断言
- c# - 如何成功将 XML 文件反序列化为 C# 对象 (.svg)?
- java - 在进行 gRPC 客户端流式传输时,服务器在未收到所有请求时的行为方式
- asp.net-core - Markdown 不渲染 html 元素
- azure-data-factory - 在 Azure 上上传的 blob 的 MD5 哈希与本地计算机上的相同文件不匹配
- javascript - 如何将 API 检索到的日期转换为 React 可以理解的日期
- asp.net - 如何确定为什么 chrome 将网站标记为不安全
- php - PHPSpreadsheet公式在日期之间不起作用