如何在选择的事件上编码Jquery选择？

Question

我的代码有点麻烦，我希望有人能帮忙。我试图让用户从选择框中选择一个选项，然后选择另一个选择框以基于该查询结果。我知道这应该是简单的，但我似乎无法得到它的工作。这是我到目前为止的代码。

第一个选择框中：

select id="selCategory" name="category" class="chzn-select"<?php if (in_array('category',$_SESSION['iserror'])) {echo ' class="isError" ';} ?> > 
<option value ="" "> 
     <?php 
     while ($row = hesk_dbFetchAssoc($res)) 
     { 
      echo '<option value="' . $row['id'] . '"' . (($_SESSION['c_category'] == $row['id']) ? ' "' : '') . '>' . $row['name'] . '</option>'; 
     } 
     ?> 
     </select> 

第二个选择框：

<select id="selAsset" name ="asset" class="chzn-select"> 
    <option value="" selected="selected"></option> 
    <?php 
     while ($row = odbc_fetch_array($Assets)) 
     { 
     echo '<option value="' . $row['AssetID'] . '"' .   (($_SESSION['c_asset'] == $row['AssetID']) ? '    selected="selected"' : '') 
     . '>' . $row['AssetName']. '</option>'; 
     } 
     odbc_close($conLansweeper); 
    ?> 
    </select> 

的代码，如果显示在第二个下拉框来处理。

<script language="Javascript" type="text/javascript">$(function() 
{ 
$(".selCategory").chosen().change(function(){ 
    var selectedCategory=$(this).find("option:selected").val(); 
    if(selectedCategory == "1") 
    { 
     $(.selAsset).show(); 
    } 
    else 
    { 
     $(.selAsset).hide(); 
    } 
    }); 
    }); 
    </script> 

页脚代码：

<script type="text/javascript" src="script/chosen/jquery.min.js"></script> 
<script type="text/javascript" src="script/chosen/chosen.jquery.js"></script> 
<!--<script type="text/javascript" src="script/jquery/jquery-1.10.2.min.js"></script>--> 
<script type="text/javascript">$(".chzn-select").chosen({disable_search_threshold: 10, width:200, placeholder_text_single:" ", search_contains: true, allow_single_deselect: true });</script> 

的基本目的是对要隐藏的第二选择框当页面载荷，当适当的值在第一选择框被选择的显示。

任何人都可以帮我吗？我还没有设法让这个工作，如果我能得到一个工作的例子和一些帮助，以显示我出错的地方真的会有所帮助。

Answer 1

方法1（使用现有的HTML）：

隐藏的CSS：

#selAsset { 
    display:none; 
} 

然后jQuery的：

$(function(){ 
    var selCategory = $('#selCategory'); 
    $(selCategory).change(function() { 
    $('option:selected').each(function() { 
     if($(this).text() === '3') { 
     jQuery('#selAsset').show(); 
     } 
    }); 
    }); 
}); 

这使用text()检查所选择的选项。在您的代码中，不需要.chosen()，您可以将此更改为：$(.selAsset).show();为：​​（与html匹配）。

演示：http://jsfiddle.net/dRM92/1/

一个更好的方法（从评论）：

我们可以用.change(function(){和开关的情况下，检查该选项的值;然后相应地操作。

var selCategory = $('#selCategory'); 
var selAsset = $('#selAsset'); 

selCategory.change(function() { 
    switch ($(this, 'option:selected').val()) { 
     case "3": 
      selAsset.show(); 
      break; 
     case "please select": 
      selAsset.hide(); 
      break; 
    } 
}); 

这比以前的方法更具有可扩展性。有很多方法可以检查选项的值或文本;对于这个例子，我们只需要检查选定的值和你想要的参数。

演示：http://jsfiddle.net/gzWGQ/1/