title: jquery select dropdown change the value of the other dropdown
body: <p>Hi i have this dropdown select option when selecting change the other value of the select dropdown. Im using onchange in jquery. My problem is when i select apple dropdown the lists of apple products will appear which is okay. Now when i select samsung it wont change the value for samsung products. Here is my code below</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      jQuery(document).ready(function($) {
          /*$("#phoneBrand").change(function () {
              var end = this.value;
              var firstDropVal = $('#data-original-index').val();
              alert(firstDropVal);
          });*/
  
          $("#phoneBrand").on('change', function(){
              var phoneBrand = $("#phoneBrand").val();
  
              if(phoneBrand == "apple"){
                  alert(phoneBrand);
                  &lt;?php
                  // All Option
                  //echo '&lt;option value=""&gt;'.$houzez_local['all_model'].'&lt;/option&gt;';
                  $prop_type = get_terms (
                      array(
                          "property_feature"
                      ),
                      array(
                          'orderby' =&gt; 'name',
                          'order' =&gt; 'ASC',
                          'hide_empty' =&gt; true,
                          'parent' =&gt; 0
                      )
                  );
  
                  //houzez_hirarchical_options('property_feature', $prop_type, $type );
  
                  ?&gt;
  
                  //var pModel = "&lt;?php echo $pModel;?&gt;";
                  //alert(pModel);
  
  
                  $("div").each(function(i) {
                      var dropdown = $("&lt;select&gt;");
                      &lt;?php foreach($prop_type as $model): ?&gt;
                      &lt;?php
                          $pName = $model-&gt;name;
                          $pSlug = $model-&gt;slug;
                          $pModel = $model-&gt;description;
                      ?&gt;
                      &lt;?php if($pModel == "apple"): ?&gt;
  
                      dropdown.append($('&lt;option&gt;', {
                          value:'&lt;?php echo $pSlug; ?&gt;',
                          text:'&lt;?php echo $pName;?&gt;'
                      }));
                      &lt;?php endif; ?&gt;
                      &lt;?php endforeach; ?&gt;
                      $("#phoneModel").replaceWith(dropdown);
  
                  });
  
              }else if(phoneBrand == "blackberry"){        
                //$("#age_boys").show();
                 alert('test');
              }else if(phoneBrand == "htc"){
  
              }else if(phoneBrand == "huawai"){
  
              }else if(phoneBrand == "lg"){
  
              }else if(phoneBrand == "microsoft"){
  
              }else if(phoneBrand == "nokia"){
  
              }else if(phoneBrand == "samsung"){
                  alert(phoneBrand);
                  &lt;?php
                      // All Option
                      //echo '&lt;option value=""&gt;'.$houzez_local['all_model'].'&lt;/option&gt;';
  
                      $prop_type = get_terms (
                          array(
                              "property_feature"
                          ),
                          array(
                              'orderby' =&gt; 'name',
                              'order' =&gt; 'ASC',
                              'hide_empty' =&gt; true,
                              'parent' =&gt; 0
                          )
                      );
  
                      //houzez_hirarchical_options('property_feature', $prop_type, $type );
                  ?&gt;
  
                      //var pModel = "&lt;?php echo $pModel;?&gt;";
                      //alert(pModel);
  
                  $( "div" ).each(function(i) {
                      var dropdown = $("&lt;select id='samsung'&gt;");
                      &lt;?php foreach($prop_type as $model): ?&gt;
                      &lt;?php
                          $pName = $model-&gt;name;
                          $pSlug = $model-&gt;slug;
                          $pModel = $model-&gt;description;
                      ?&gt;
                      &lt;?php if($pModel == "samsung"): ?&gt;
                          dropdown.append($('&lt;option&gt;', {
                              value:'&lt;?php echo $pSlug; ?&gt;',
                              text:'&lt;?php echo $pName;?&gt;'
                          }));
                      &lt;?php endif; ?&gt;
                      &lt;?php endforeach; ?&gt;
                      $("#phoneModel").replaceWith(dropdown);
  
  
                  });
  
  
              }
          });
  
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Now my html select dropdown which is built from theme houzez in wordpress</p>
  
  <pre><code>&lt;?php if( $adv_show_hide['type'] != 1 ) { ?&gt;
                  &lt;div class="col-sm-3 col-xs-12"&gt;
                      &lt;div class="form-group" &gt;
                          &lt;select  id="phoneModel" name="feature" class="selectpicker " data-live-search="false" data-live-search-style="begins"&gt;
                              &lt;?php
                              // All Option
                              echo '&lt;option  value=""&gt;'.$houzez_local['all_model'].'&lt;/option&gt;';
  
                              $prop_type = get_terms (
                                  array(
                                      "property_feature"
                                  ),
                                  array(
                                      'orderby' =&gt; 'name',
                                      'order' =&gt; 'ASC',
                                      'hide_empty' =&gt; true,
                                      'parent' =&gt; 0
                                  )
                              );
  
                              houzez_hirarchical_options('property_feature', $prop_type, $type);
  
  
                              ?&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;?php } ?&gt;
  </code></pre>
  
  <p>Can someone help me figured this thing out? that it will only change the value once the dropdown is only selected.</p>
  
  <p>Provided below is a screenshot image<a href="https://i.stack.imgur.com/YROlO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YROlO.png" alt="enter image description here"></a></p>
  
  <p>Any help is muchly appreciated. TIA. Im using wordpress</p>