How to code Jquery Chosen on select event? - php

Question

I'm having a little trouble with my code and I'm hoping someone can help. I'm trying to have the user select an option from a select box and then another select box to be based on that queries result. I know this should be simple but I can't seem to get it to work. Here's the code I've got so far.
The First select box:
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>
The second select box:
<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>
The code to handle if the second drop down box is displayed.
<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>
Footer Code:
<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>
The basic aim is for the second select box to be hidden when the page loads and the display when the appropriate value is selected in the first select box.
Can anyone help me out? I've not managed to get this working before and If i can get a working example and some help to show where I'm going wrong would really help.

Answer 1

Approach 1 (using existing html):
Hide with css:
#selAsset {
display:none;
}
Then jQuery:
$(function(){
var selCategory = $('#selCategory');
$(selCategory).change(function() {
$('option:selected').each(function() {
if($(this).text() === '3') {
jQuery('#selAsset').show();
}
});
});
});
This uses text() to check the selected option. In your code there is no need for .chosen() and you can change this: $(.selAsset).show(); to this: $('#selAsset').show(); (to match the html).
Demo: http://jsfiddle.net/dRM92/1/
A better approach (from comments):
We can use .change(function(){ and a switch case to check the option's value; then manipulate accordingly.
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;
}
});
This is more extendable than the previous approach. There are many ways to check an option's value or text; for this instance we need to check the selected value only and the argument/s you wish to have.
Demo: http://jsfiddle.net/gzWGQ/1/