2012-05-19 173 views
0

我有兩個多選擇列表如何選擇的一部分「選擇」

<html><head></head> 
<body> 

<select name="cars" multiple="multiple" size="7"> 
    <option value="">-</option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

<select name="drivers" multiple="multiple" size="7"> 
    <option value="1">Luiza</option> 
    <option value="2">Sebastian</option> 
    <option value="3">John</option> 
    <option value="4">Arthur</option> 
    <option value="5">Staszek</option> 
    <option value="6">Patryk</option> 
    <option value="7">Lucas</option> 
    <option value="8">Madlen</option> 
    <option value="9">Bartek</option> 
    <option value="10">Inter</option> 
</select> 
</body></html> 

我必須選擇取決於「汽車」

例如,當我選擇沃爾沃的「司機」它無意中應該選擇Luiza,John和Staszek。 如果我選擇薩博,我必須選擇亞瑟,國際米蘭,盧卡斯,帕特里克

如果它是不可能的,那麼從「汽車」選擇後,選擇「司機」應禁用,當我選擇「 「從」汽車「,」司機「應該再次活躍。

回答

1

與阿賈克斯做到這一點,如果能夠從數據庫加載數據。 或使用jQuery

$(document).ready(function() {  
      $('#a2').attr("disabled", "disabled"); 
      $('#a1').change(function() { 
       var str = ""; 
       $("#a1 option:selected").each(function() { 
        str += $(this).text() + " "; 
       }); 
       if(str.trim()=="-") 
        $('#a2').removeAttr("disabled"); 
       else 
        $('#a2').attr("disabled", "disabled"); 
      }); 
}); 

試試這個,給ID爲情況下,「A1」和「A2」司機

+0

什麼,我做錯了什麼? http://wklej.org/hash/5f90982a507/ – breq

+0

大聲笑,明白了!我有 「scr =」http://code.jquery.com/jquery-1.7.1.js「」lol:D – breq

1

蒙山jQuery的你可以easyly做到這一點:

 $(document).ready(function(){ 
     $('#select-cars').change(function(){ 
      var car = $('#select-cars').val(); 
      // Uncheck ALL driver 
      $('#select-drivers option').each(function (index, value) { 
       $(this).removeAttr('selected'); 
      }); 
      // Check each driver in funcition of the car 
      if (car == 'volvo') { 
       //check Luiza etc 
       $('#select-drivers option[value=1]').attr('selected', 'true'); 
      } else if (car == 'saab') { 

      } 

     }); 
    });