2012-05-19 107 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') { 

      } 

     }); 
    });