2017-02-27 163 views
4

我有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來實現這一點嗎?

回答

1

可以使用disabled屬性和使用JavaScript,您可以將其設置爲falsetrue

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>

+0

我使用jQuery多選擇,因爲它的上述功能不起作用下拉列表中使用複選框。我可以知道可以做些什麼嗎? – ABC

+0

這是因爲r =上述代碼沒有正確執行的腳本。我可以知道它有什麼問題嗎? ABC

0

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>

0

首先分別添加

<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); 
     } 
    }); 
}); 
相關問題