2013-01-18 104 views
0

我有以下選擇列表:如何選擇第一個選擇列表後才能調用/激活第二個選擇列表?

SELECT列表1:

<select name="productcolor" id="productcolor" onChange="GetAvailProductSizes();"> 
    <option value=""><? echo $langdata['oneprodpage_selectcolor']; ?>...</option> 
    <? foreach ($thisproduct['availcolors'] as $color) { ?> 
    <option value="<? echo $color['id']; ?>"><? echo $color['name']; ?></option> 
    <? }; ?> 
</select> 

SELECT LIST 2:

<select name="productsize" id="productsize" style="width: 120px;"> 
<option value=""><? echo $langdata['oneprodpage_selectsize']; ?>...</option> 
</select> 

如果列表1中任何地方選擇的選項,說明2將是空的。這就像LIST 2取決於列表1.

這是這裏所進行的:

<script type="text/javascript"><!-- 
    function GetAvailProductSizes() { 
     $('select#productsize option').remove(); 
     $('select#productsize').append('<option value=""><? echo $langdata['oneprodpage_selectsize']; ?>...</option>'); 

     var color = $('#productcolor').val(); 
     if (color > 0) { 
      var availsizes; 
      var http_request = new XMLHttpRequest(); 
      http_request.open("GET", '<? echo ROOT; ?>/autocompleteavailsizes/?productid=<? echo $thisproduct['id']; ?>&color=' + color, true); 
      http_request.send(null); 
      http_request.onreadystatechange = function() { 
       if (http_request.readyState == 4) { 
        if (http_request.status == 200) { 
         availsizes = eval("(" + http_request.responseText + ")"); 

         for (var i = 0; i < availsizes.length; i++) { 
          $('select#productsize').append('<option value="' + availsizes[i].id + '">' + availsizes[i].name + '</option>'); 
         }; 
        } else { 
         alert("There was a problem with the URL."); 
        } 
        http_request = null; 
       } 
      }; 
     }; 
    } 
//--> 
</script> 

現在,我想SELECT列表2被隱藏,直到SELECT列表1並沒有被感動。任何幫助請與PHP或jQuery。謝謝!

回答

0

只需添加display:none到第二列表的style屬性和使用$('select#productsize').show();你的函數裏面,讓它出現,

+0

謝謝!很簡單的解決方案 – user1978483

相關問題