Dependent drop down menus

Hi guys. I’m using the codes below for in site search. First one is Drop Down menu for Region select. Second one is Drop Down menu for City Select.
However they are not dependent to each other. I want users to select region first and according to their choice i want them to choose city.
For example if user selects New York the city dropdown should show cities of New York like Albany, NYC, New Paltz, etc.
Extra: If user changes Region while region and city is selected on search form, city field should reset to empty value. (this would be a plus but not my priority right now :slight_smile: Thanks.

                          <div class="row one_input">
                              <h6><?php _e('Region', 'modern'); ?></h6>
                              <?php $aRegions = Region::newInstance()->listAll();

foreach($aRegions as $key => $region) {
                        if (in_array($region['pk_i_id'], array(781962,781999,781998))) {
                                     unset($aRegions[$key]) ;
                                     array_unshift($aRegions, $region);
                              }
                  }  ?>
                                    <?php if(count($aRegions) > 0 ) { ?>
                                    <select name="sRegion" id="sRegion">
				    <option value="">All Regions</option>
                                        <?php foreach($aRegions as $region) { ?>
                                        <option value="<?php echo $region['s_name'] ; ?>" <?php if (osc_esc_html( osc_search_region() )==$region['s_name']) echo ' selected="selected" '; ?>><?php echo $region['s_name'] ; ?></option>
                                        <?php } ?>
                                    </select>
                                    <?php } ?>
                              <h6><?php _e('City', 'modern'); ?></h6>
                               <?php $aCities = City::newInstance()->listAll(); ?>
                                    <?php if(count($aCities) > 0 ) { ?>
                                    <select name="sCity" id="sCity">
					<option value="">All Cities</option>
                                        <?php foreach($aCities as $city) { ?>

                                        <option value="<?php echo $city['s_name'] ; ?>" <?php if (osc_esc_html( osc_search_city() )==$city['s_name']) echo ' selected="selected" '; ?>><?php echo $city['s_name'] ; ?></option>
                                        <?php } ?>
                                    </select>
                                    <?php } ?>
                            </div>

You’ll have to do that with Javascript. Do a search for AJAX in these forums, or google for it, you’ll find tons of results.