基于另一个下拉列表
问题描述:
我有2个下拉列表基于另一个下拉列表
<select id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
我想,只有当我们在第一个下拉选择值下降的第二个下拉列表应该得到启用启用/禁用下拉列表名单。如果我们取消选择第一个下拉列表中的值,它应该再次被禁用。 我可以知道如何使用jQuery来实现这一点吗?
答
可以使用disabled
属性和使用JavaScript,您可以将其设置为false
或true
function check(){
if(document.getElementById('servergroup').value!='')
document.getElementById('servername').disabled=false;
else
document.getElementById('servername').disabled=true;
}
<select onchange="check()" id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select disabled id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
答
jQuery的解决方案。
function change() {
if ($('#servergroup option:selected').length) {
$('#servername').attr('disabled', false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple" disabled>
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
答
首先分别添加
<option value="-1"> -Select Server Group- </option>
和
<option value="-1"> -Select Server Name- </option>
到你的下拉框。
我们可以使用JQuery如下达到要求的动作:
$(document).ready(function()
{
//making serverName Dropdown box disabled by default.
$('#servername').prop('disabled', true);
$('#servergroup').change(function()
{
if($(this).val == "-1")
{
$('#servername').val = "-1";
$('#servername').prop('disabled', true);
}
else
{
$('#servername').prop('disabled', false);
}
});
});
我使用jQuery多选择,因为它的上述功能不起作用下拉列表中使用复选框。我可以知道可以做些什么吗? – ABC
这是因为r =上述代码没有正确执行的脚本。我可以知道它有什么问题吗? – ABC