Php 如何对select事件上选择的Jquery进行编码?
我的代码有点问题,希望有人能帮我。我试图让用户从一个选择框中选择一个选项,然后再选择另一个基于该查询结果的选择框。我知道这应该很简单,但我似乎无法让它发挥作用。这是我到目前为止得到的代码 第一个选择框:Php 如何对select事件上选择的Jquery进行编码?,php,jquery,javascript-events,jquery-chosen,Php,Jquery,Javascript Events,Jquery Chosen,我的代码有点问题,希望有人能帮我。我试图让用户从一个选择框中选择一个选项,然后再选择另一个基于该查询结果的选择框。我知道这应该很简单,但我似乎无法让它发挥作用。这是我到目前为止得到的代码 第一个选择框: select id="selCategory" name="category" class="chzn-select"<?php if (in_array('category',$_SESSION['iserror'])) {echo ' class="isError" ';} ?>
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>
第二个选择框:
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>
基本目标是在加载页面时隐藏第二个选择框,并在第一个选择框中选择适当的值时显示
有人能帮我吗?我以前没有成功地让它工作过,如果我能得到一个工作的例子和一些帮助来说明我哪里出了问题,那真的会很有帮助 使用现有html的方法1:
使用css隐藏:
#selAsset {
display:none;
}
然后jQuery:
$(function(){
var selCategory = $('#selCategory');
$(selCategory).change(function() {
$('option:selected').each(function() {
if($(this).text() === '3') {
jQuery('#selAsset').show();
}
});
});
});
这将使用文本来检查所选选项。在您的代码中,不需要选择.selected,您可以更改:$.selAsset.show;对此:$'selAsset'.show;以匹配html
演示:
从评论中找到更好的方法:
我们可以使用.changefunction{和一个switch case来检查选项的值;然后进行相应的操作
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;
}
});
这比以前的方法更具可扩展性。有许多方法可以检查选项的值或文本;在这种情况下,我们只需要检查所选的值和您想要的参数
演示:Hi tony感谢您的回复。这是一个很好的示例,但是当取消选择原始选项时,您如何使第二个选择框消失?我可以看到它可以工作,但我的Jquery似乎不想玩球。