如何选择第一个选择列表后才能调用/激活第二个选择列表？

Question

我有以下选择列表：

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。谢谢！

Answer 1

只需添加display:none到第二列表的style属性和使用$('select#productsize').show();你的函数里面，让它出现，