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();：$('#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/

如何在选择事件上编写Jquery Chosen代码？

1 个答案: