javascript - I need to populate 2 select dropdowns onclicking 1 of 3 radio options -

i have searched high , low kind of similar answer no avail, little or guidance on this, please.

wordpress real estate site,search form, 3 contract types, rent, sale, short term rental, 3 radio inputs. have 2 select boxes populated min , max prices search. need able change values of min , max select box, depending on radio button selected. php average (i reloading page once radio button clicked, prefer jquery if possible) jquery/java poor, trying learn.

the $key price ranges generated following code:

 $terms = get_terms( "contract_type");         foreach ($terms $term ) {             $contract_types[$term->term_id] = $term->name;         }          foreach( $contract_types $key => $value ) {              if( array_key_exists("enable-{$key}-search", $property ) ):         $checked = ($key == $_get['searchby'] ) ? ' checked ':'';             $title = dttheme_option("property","{$key}-title");             echo "<input type='radio' id='{$key}' {$checked} value='{$key}' name='searchby' class='regular-radio' /><label for='{$key}'>{$title}</label>";               endif;                 } 

that populates $key with contract references, 34, 35 , 55 respectively, seen here.. http://www.malisa.asia/property-search-2/

the select boxes populated as:

            #min price rent module               if( $instance['price_module'] == 'true' ):          echo '<div id="default" class="min-price-module small-module malisa-select">';         echo '<label>'.__('rent range','dt_themes').'</label>';          $min_prices = array_key_exists("min-price-for-{$key}", $property) ? $property["min-price-for-{$key}"] : array();         $min_prices = array_filter($min_prices);         $min_prices = array_unique($min_prices);      echo select( "dt-min-price", "minprice", $min_prices, $currency, $selected), "\n\n";       endif;                #max price default module               if( $instance['price_module'] == 'true' ):         $max_prices = array_key_exists("max-price-for-{$key}", $property) ? $property["max-price-for-{$key}"] : array();                 $max_prices = array_filter($max_prices);                 $max_prices = array_unique($max_prices);         echo select( "dt-max-price", "maxprice", $max_prices, $currency, $selected), "\n\n";      echo '</div>';       endif;              #min price sale module               if( $instance['price_module'] == 'true' ):          echo '<div id="default" class="min-price-module small-module malisa-select">';          echo '<label>'.__('sale range','dt_themes').'</label>';          $min_prices = array_key_exists("min-price-for-{$key}", $property) ? $property["min-price-for-{$key}"] : array();          $min_prices = array_filter($min_prices);          $min_prices = array_unique($min_prices);           echo select( "dt-min-price", "minprice", $min_prices, $currency, $selected), "\n\n";        endif; 

this within form, hiding select box isnt possible. see trying achieve, https://www.purplebricks.com/search#! please point me in right direction achieve this, appreciated.

you should following things:

1) take 2 variables corresponding minimum , maximum of radio options every radio options.

e.g.  var r_min,r_max,s_min,s_max,st_min,st_max; 

2) on combo-box change event, save minimum , maximum values in variables corresponding radio options.

jquery('#dt-max-price').on('change',function(){    if(jquery('#34').is(':checked')){        r_min=jquery('#dt-min-price').val();    }    if(jquery('#36').is(':checked')){              s_min=jquery('#dt-min-price').val();    }    if(jquery('#55').is(':checked')){             st_min=jquery('#dt-min-price').val();    } }); jquery('#dt-max-price').on('change',function(){    if(jquery('#34').is(':checked')){       r_max=jquery('#dt-max-price').val();    }    if(jquery('#36').is(':checked')){             s_max=jquery('#dt-max-price').val();    }    if(jquery('#55').is(':checked')){            st_max=jquery('#dt-max-price').val();    } 

});

3) when radio option selected, assign minimum , maximum variable values dropdown value.

 jquery('#36').on('click',function(){         jquery('#dt-min-price').val(s_min);     jquery('#dt-max-price').val(s_max);  });  jquery('#34').on('click',function(){         jquery('#dt-min-price').val(r_min);     jquery('#dt-max-price').val(r_max);  });  jquery('#55').on('click',function(){      jquery('#dt-min-price').val(st_min);    jquery('#dt-max-price').val(st_max);  });