jquery - wordpress How create select dependent dropdown by meta values or categories -


we had 3 custom fields

  • brand

  • model

  • features (multi input in array )

    need dependent drop down form when

  • select brand (or category) > show drop down menu contain models (related selection)

  • select model > show features of model meta value

you can see example here http://bit.ly/1q2z9te

we tried these codes not worked

    $rd_args = (array(     'ignore_sticky_posts' => 1,         'orderby' => 'meta_value',          'order' => 'asc',              'meta_query' => array(             array(             'key' => 'brand',             ),             array(             'key' => 'model',             )         )     ));      $rd_query = new wp_query( $rd_args );          $the_query = new wp_query(array( 'meta_key' => 'votes_count', 'meta_value' => '1' ));      $html_out = '';     $html_out = '<select id="office-chooser2" >';     $html_out .= '<option value="none">select office</option>';     $select  = '<select id="office-chooser">';     $select .= '<option value="none">select office</option>';       while ($rd_query->have_posts()) : $rd_query->the_post();          // add each div excerp. it's id unique , correlates value of select drop down             $brand = (get_post_meta($post->id, 'brand', true));             $model = (get_post_meta($post->id, 'model', true));         $html_out .= '<option value="office-'.$post->id.'" class="office-entry" id="office-'.$post->id.'">'.$model.'</option>';         $select   .= '<option value="office-'.$post->id.'">'.$brand.'</option>';     endwhile;      // wrap $select     $select .= '</select>';     $html_out .= '</select>';      echo $select;     echo $html_out;       ?>      <script type="text/javascript">         jquery(function($){             $('#office-chooser').change(function(){                 var $selected_office = $(this).val();                 if(($selected_office == 'none') ){                     $('div.office-entry').hide();                     $('#office-chooser2').hide();                     $('#' + $selected_office).hide();                 } else  {                  $('#' + $selected_office).show();                                 $('#office-chooser2').show();      }             });         });     </script> 


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -