hide / show not working on select tags

[sharp_mac]

Greetings,

I recently learned that the <option> tags can not use the onclick attribute inside of IE. This works great for firefox, but sadly not a single version of internet explorer supports it (from what I am told via countless Google searches).

I have been modifying my attempit at a solution to use the <select> tag with the attribute onchange. Maybe I am casing this wrong, or not seeing a solution as the below code does not operate in any browser,
and no errors are reported back through firebug or IE.

Excuse my sloopy attempt at {smarty tags} this script is written in a bunch of PHP object->vales and to save space cored the issue down to it's basics.

On change of the select box, the value="5-28" is sent to javascript showBox to split the number away from the id_trips and only focus on the locations (the number before the '-' .

IF the location matches the switch value then the box should show / hide or value change. The IDs are all correct I just think that there is a ' or a " or something off as I am not a javascript expert.

my SQL return values
<code class="php">
//PHP VARIABLES from QUERY sample loop 1
trip-number = 200
locations = 5
id_trips = 28

</code>

my HTML form loop
<code class="html">


{BEGIN LOOP 'trips'}
<!--HTML form for {trip-number} -->
<form id="trip{trip-number}" method="post" action="#">

<select id="depid{trip-number}"
name="depId" class="inputed greybig required"
onchange="showBox(this.value, '{trip-number}', 'dep');">
<option value="">Select Time</option>
<option value="{locations}|{id_trip}">{trip-time}</option>
</select>

</form>
<!--/HTML form for {trip-number} -->
{/END LOOP 'trips'}

</code>

my javascript at the bottom of the page before the </body>
<code class="javascript">
<!--
JAVASCRIPT AT END OF PAGE BEFORE CLOSING </body>
I am using the jQuery Tools latest build 1.4.2
pull value, split and process for hide / show options
-->
<script type="text/javascript">
function showBox(val, trip, arrdep){
var splitVal = val.split("-");
switch (splitVal[0]){
case 1: //Airport
$("#"+arrdep+"dep_win_airport"+trip).show();
case 2: //Port of Miami
$("#"+arrdep+"_win_cruse"+trip).show();
case 4: //Port Canaveral
$("#"+arrdep+"_win_cruse"+trip).show();
case 5: //door drop off
$("#"+arrdep+"_win_door"+trip).show();
case 6: //Door Pick Up

case 7://Airport NO FLIGHT
default:
$("#"+arrdep+"_window"+trip).hide();
$("#"+arrdep+"_info_"+trip).hide();
$("#"+arrdep+"_win_door"+trip).hide();
$("#"+arrdep+"_win_cruse"+trip).hide();
$("#"+arrdep+"_win_airport"+trip).hide();
$("#"+arrdep+"info_"+trip).val("Supply Address");
}; //end switch splitVal
}; //end function showBox
</script>
</code>

[sharp_mac]

My revised code is as follows.

<select id="arrid<?php echo $dep_main->dep_tripnumber; ?>" name="arrId" class="inputed greybig required" onchange='javascript:showBox(this.value, "<?php echo $dep_main->dep_tripnumber; ?>", "arr");' >
<option value="">Select Time</option>
                           
<?php while ($arr_li = $db->fetchNextObject($arr_list)) { ?>
<option value="<?php echo $arr_li->id_locations; ?>-<?php echo $arr_li->id_trips; ?>">
<?php
    echo ampm($arr_li->times);
    echo " - ".$arr_li->locations;
    if(isset($addCost)) echo ' + $'.$addCost.'*'; unset($addCost);
?>
</option>
<?php } //end while loop 
?>
</select>

    <!-- pull value, split and process for hide / show options -->
    <script type="text/javascript">
    function showBox(val, trip, arrdep){
            var splitVal = val.split("-");
            //document.write(splitVal[0]);
            switch (splitVal[0]){
                case 7://Airport NO FLIGHT
                default:
                    $('#'+arrdep+'_window'+trip+'').hide();
                    $('#'+arrdep+'_info_'+trip+'').hide();
                    $('#'+arrdep+'_win_door'+trip+'').hide();
                    $('#'+arrdep+'_win_cruse'+trip+'').hide();
                    $('#'+arrdep+'_win_airport'+trip+'').hide();
                    $('#'+arrdep+'info_'+trip+'').val('na');
                break;
                case 1: //Airport
                    $("#"+arrdep+"dep_win_airport"+trip+"").show();
                break;
                case 2: //Port of Miami
                    $("#"+arrdep+"_win_cruse"+trip+"").show();
                break;
                case 4: //Port Canaveral
                    $("#"+arrdep+"_win_cruse"+trip+"").show();
                break;
                case 5: //door drop off
                case 6: //Door Pick Up
                    $("#"+arrdep+"_win_door"+trip+"").show();
                break;
            }; //end switch
        }; //end function showarrBox
    </script>
    <!-- /pull value, split and process for hide / show options -->

[sharp_mac]

The solution is posted http://ikandigraphics.com/selectbox_onchange_fixed.php

The issue was since I am a PHP programmer mostly I am not use to having to parse values in and out of int / string values. I was taking the split() function and splitting the value correctly however the switch() was not seeing the value as a int in order for case 1: to work properly.

Really the fix was adding " " quotes around the numbers forcing JavaScript to compare as string rather then int.

Thank you for your time in reviewing my code.