Cascade dropdown not working using JS
<p>I have one file with PHP and JS. In this file I have 3 dropdowns, I tried to apply the cascading but it's not working. When I choose an option in the first dropdown, the 2nd dropdown down have no value.</p>

<p>How to fix this?</p>

<p>PHP for dropdown:</p>

<pre><code>&lt;form action='' method='post' name='resumeDatabank' id='resumeDatabank'&gt;
&lt;div class="div-select"&gt;
&lt;label for="list_position" id="#ddress_search LABEL"&gt;Position&lt;/label&gt;
&lt;br/&gt;
&lt;select name="list_position" id="filterbyposition"&gt;
    &lt;option name="default" class="filter_by" selected="selected" value="Select by Position"&gt;Select by Position&lt;/option&gt;
    &lt;?php
    foreach($query_position as $option){
        if(isset($_POST['list_position']) &amp;&amp; $_POST['list_position'] == $option-&gt;position)
            echo '&lt;option name="list_position" class="filter_by" selected value="'. $option-&gt;position .'"&gt;'. $option-&gt;position .'&lt;/option&gt;';
        else
         echo '&lt;option name="list_position" class="filter_by" value="'. $option-&gt;position .'"&gt;'. $option-&gt;position .'&lt;/option&gt;';
    };
    ?&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class="div-select"&gt;
&lt;label for="list_location" id="#ddress_search LABEL"&gt;Location&lt;/label&gt;
&lt;br/&gt;
&lt;select name="list_location" id="filterbylocation"&gt;
    &lt;option name="default" class="filter_by" selected="selected" value="Select by Location"&gt;Select by Location&lt;/option&gt;
    &lt;?php
    foreach($query_locations as $option){
        if(isset($_POST['list_location']) &amp;&amp; $_POST['list_location'] == $option-&gt;hiring_location)
            echo '&lt;option name="list_location" class="filter_by" selected value="'. $option-&gt;hiring_location .'"&gt;'. $option-&gt;hiring_location .'&lt;/option&gt;';
        else
         echo '&lt;option name="list_location" class="filter_by" value="'. $option-&gt;hiring_location.'"&gt;'. $option-&gt;hiring_location .'&lt;/option&gt;';
     };
    ?&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class="div-select"&gt;
&lt;label for="list_processed" id="#ddress_search LABEL"&gt;Processed&lt;/label&gt;
&lt;br/&gt;
&lt;select name="list_processed" id="filterbyprocessed"&gt;
    &lt;option name="default" class="filter_by" selected="selected" value="Select by Processed"&gt;Select by Processed&lt;/option&gt;
    &lt;?php
    foreach($query_processed as $option){
        if(isset($_POST['list_processed']) &amp;&amp; $_POST['list_processed'] == $option-&gt;processed_option)
            echo '&lt;option name="list_processed" class="filter_by" selected value="'. $option-&gt;processed_option .'"&gt;'. $option-&gt;processed_option .'&lt;/option&gt;';
        else
         echo '&lt;option name="list_processed" class="filter_by" value="'. $option-&gt;processed_option.'"&gt;'. $option-&gt;processed_option .'&lt;/option&gt;';
     };
    ?&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class="div-input"&gt;
&lt;input type="submit" value="Search" class="div-input-submit"/&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>JS:</p>

<pre><code>    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("&lt;option value='"+value.id+"'&gt;"+value.filterbylocation+"&lt;/option&gt;");
            });
        } 
    });
});
</code></pre>