javascript - Cascade dropdown not working using JS -
i have 1 file php , js. in file have 3 dropdowns, tried apply cascading it's not working. when choose option in first dropdown, 2nd dropdown down have no value.
how fix this?
php dropdown:
<form action='' method='post' name='resumedatabank' id='resumedatabank'> <div class="div-select"> <label for="list_position" id="#ddress_search label">position</label> <br/> <select name="list_position" id="filterbyposition"> <option name="default" class="filter_by" selected="selected" value="select position">select position</option> <?php foreach($query_position $option){ if(isset($_post['list_position']) && $_post['list_position'] == $option->position) echo '<option name="list_position" class="filter_by" selected value="'. $option->position .'">'. $option->position .'</option>'; else echo '<option name="list_position" class="filter_by" value="'. $option->position .'">'. $option->position .'</option>'; }; ?> </select> </div> <div class="div-select"> <label for="list_location" id="#ddress_search label">location</label> <br/> <select name="list_location" id="filterbylocation"> <option name="default" class="filter_by" selected="selected" value="select location">select location</option> <?php foreach($query_locations $option){ if(isset($_post['list_location']) && $_post['list_location'] == $option->hiring_location) echo '<option name="list_location" class="filter_by" selected value="'. $option->hiring_location .'">'. $option->hiring_location .'</option>'; else echo '<option name="list_location" class="filter_by" value="'. $option->hiring_location.'">'. $option->hiring_location .'</option>'; }; ?> </select> </div> <div class="div-select"> <label for="list_processed" id="#ddress_search label">processed</label> <br/> <select name="list_processed" id="filterbyprocessed"> <option name="default" class="filter_by" selected="selected" value="select processed">select processed</option> <?php foreach($query_processed $option){ if(isset($_post['list_processed']) && $_post['list_processed'] == $option->processed_option) echo '<option name="list_processed" class="filter_by" selected value="'. $option->processed_option .'">'. $option->processed_option .'</option>'; else echo '<option name="list_processed" class="filter_by" value="'. $option->processed_option.'">'. $option->processed_option .'</option>'; }; ?> </select> </div> <div class="div-input"> <input type="submit" value="search" class="div-input-submit"/> </div> </form>
js:
jquery("#filterbyposition").live('change',function() { var selectval = jquery('#filterbyposition :selected').val(); alert(selectval); var $output = jquery('#filterbylocation').html(''); jquery.ajax({ url: 'page-resume-databank.php', data: "n="+selectval, datatype: 'json', success: function(data){ jquery.each(data, function(key,value){ $output.append("<option value='"+value.id+"'>"+value.filterbylocation+"</option>"); }); } }); });
your code wrong
jquery("#filterbyposition").live('change',function() { var selectval = jquery('#filterbyposition :selected').val(); alert(selectval); *var $output = jquery('#filterbylocation').html('');*
you add event filterbyposition, code jquery('#filterbylocation').html('') set 2nd dropdown down have no value.
change jquery('#filterbyposition').html('')
Comments
Post a Comment