Dropdown Issue

Question

Hi

<style>
*{margin:0;padding:0;}
form{padding:10px}
#submitbox{margin:10px 0 0 180px;width:90px;}
label{display:block;float:left;font-family:Arial;font-size:12px;width:180px;padding-top:1px;}
input,select,textarea{border:1px solid #ccc;font-family:Arial;font-size:12px;width:180px;margin-bottom:7px;padding:1px;}
.checkboxes{width:1em;}
.required{border-left:3px solid #ff0000 !important}
.optional{border-left:3px solid #cccccc !important}
.error{border:1px solid #ff0000;}
label.error{display:block;width:200px;font-size:10px;color:red;margin:-7px 0 -15px 180px;border:0;float:none}
br{clear:left;}
</style>
<script type="text/javascript" src="web2anything/jquery/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="web2anything/jquery/jquery.validate.pack.js"></script>
<script>
 $(document).ready(function(){
 jQuery('#Pos_Other__c').hide();
 jQuery('.posother').hide();
 jQuery('#Office-1').hide();
 $('#Office-2').hide();
 var das =jQuery('#Office-1').html();
 $('#Schools__c').html(das);
jQuery('#Position__c').change(function() {
 var res= $(this).val();
 if(res == 'Other') {
 $('#Pos_Other__c').show();
 jQuery('.posother').show();
 }
 else {
 $('#Pos_Other__c').hide();
 jQuery('.posother').hide();
 }
 
 });
 jQuery('#City__c').change(function() {
  var res=$(this).val();
 if(res =='Office-1'){
 var das =jQuery('#Office-1').html();
 $('#Schools__c').html(das);
 }else {
 var das =$('#Office-2').html();
 $('#Schools__c').html(das);
 } 
 });
 
  $("#w2x-form").validate();
  $.validator.addMethod('sqldate', function(value,element) {return this.optional(element) || /^([0-9]{4})-([0-1][0-9])-([0-3][0-9])$/.test(value);}, 'Use the format YYYY-MM-DD');
  $.validator.addMethod('sqldatetime', function(value,element) {return this.optional(element) || /^([0-9]{4})-([0-1][0-9])-([0-3][0-9])T([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])Z$/.test(value);}, 'Use the format YYYY-MM-DDThh:mm:ssZ');
 });
</script>
<form enctype="multipart/form-data" action="" method="POST" id="w2x-form">
<input type=hidden name="retURL" value="">
<input type=hidden name="sObj" value="SchoolSystem__c">


<label for="LastName__c">Last Name</label>
<input type="text" id="LastName__c" name="string_LastName__c" class="required" maxlength="40" size="20" /><br />

<label for="City__c">City</label>
<select id="City__c" name="picklist_City__c" class="optional">
  <option value="Office-1">Office-1</option>
  <option value="Office-2">Office-2</option>
</select><br />
<label for="Schools__c">Schools:</label>
<select id="Schools__c" name="picklist_Schools__c" class="optional">
 
</select><br />
<select id="Office-1">
  <option value="Office-A">Office-A</option>
<option value="Office-B">Office-B</option>
 
</select>
<select id="Office-2">
  <option value="Office-Y">Office-Y</option>
<option value="Office-Z">Office-Z</option>

</select>
<input type="submit" name="submit" id="submitbox" value="Submit">
</form>

What is happening , currently it display both selects , which i don't want . I want when page loads it should display in City Dropdown Office-1 & corresponding dropdown list with Office-1 i.e Office-A,Office-B.

When city changes say Office-2 then location should also change i.e to Office-Y,Office-Z.

Above code is working fine in Google Chrome though , but in I.E it is giving problem.


Thanks