Set new associative array value from a js variable

PHP
1

I want to get the value of the id from this associative array when the value of the drop down changes. This of course is coming from a WordPress function. I’m able to do this fine, but then I want to take that value which I’m getting with js and set the value in a following associative array. How do I get that variable Country in the $State associate array? I believe that normally only takes a string?

<ul class="AdventureFiltersUl list-inline" onchange="myFunction()">
        <li class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <p> Country </p>
		<?php $Country = array(
            'show_option_all'    => '',
            'show_option_none'   => '',
            'option_none_value'  => '',
            'orderby'            => 'name', 
            'order'              => 'ASC',
            'show_count'         => 0,
            'hide_empty'         => 1, 
            'child_of'           => 84,
            'exclude'            => '',
            'echo'               => 1,
            'selected'           => 0,
            'hierarchical'       => true, 
            'name'               => 'cat',
            'id'                 => 'Country2',
            'class'              => 'postform',
            'depth'              => 1,
            'tab_index'          => 0,
            'taxonomy'           => 'category',
            'hide_if_empty'      => false,
            'value_field'	     => 'term_id',	
        ); ?>
        
        
        <!-- Get the Value of the currently selected item -->
        
		<script>
        function myFunction() {
            var Country = document.getElementById("Country2").value;
        }
        </script>
        
        
        
        <?php $State['child_of'] = $Country; ?>
2

I’m thinking now that I can do this with javascript since the next drop down menu/associative array is already loaded.

3

That’s a lie. What I need to do is send the new variable back to the serve and reload the next drop down using AJAX. Hmm…I’ve never done this before and it will require a lot of thought. Any pointers?

4

JS → Convert ARRAY to JSON → PHP → Convert JSON to Array

Php:

json_encode()
json_decode()

Javascript

JSON.stringify(yourArray)
JSON.parse(yourJSON)
5

I dont… quite understand what you’re trying to do from your description, but it sounds like you’re going to be needing some session-based information, if you want to persist it across AJAX calls. (Keep in mind that while your browser doesn’t reload the page, each AJAX call, as far as PHP is concerned, is a new request.)

6

Let me add more a few more lines of code to clarify and some more info.

So I have 4 different drop down menus. that are created in wordpress using the wordpress dropdown menu function.

<?php wp_dropdown_categories ()?>

Each drop down menu is based on the parent category. As you can see the first drop down menu is based on category 84
…‘child_of’ => 84…
What I want to do is dynamically populate the 2nd, 3rd, and 4th drop down menus based on the drop down selection that precedes it. I’m then going to use these categories to filter the posts on the page.

<p> Country </p>
<?php $Country = array(
    'show_option_all'    => '',
    'show_option_none'   => '',
    'option_none_value'  => '',
    'orderby'            => 'name', 
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1, 
    'child_of'           => 84,
    'exclude'            => '',
    'echo'               => 1,
    'selected'           => 0,
    'hierarchical'       => true, 
    'name'               => 'cat',
    'id'                 => 'Country2',
    'class'              => 'postform',
    'depth'              => 1,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,
    'value_field'	     => 'term_id',	
); ?>

 <?php wp_dropdown_categories( $Country ); ?>



<!-- Get the Value of the currently selected item -->


<p id="demo"></p>

<script>
function myFunction() {
    var CountryID = document.getElementById("Country2").value;
    document.getElementById("demo").innerHTML = "You selected: " + CountryID;
}
</script>

  


</section>    



<section class="AdventureFiltersUl col-lg-3 col-md-3 col-sm-6 col-xs-12">

<p>State/Province</p>
<!--State/Province-->
<?php $State = array(
    'show_option_all'    => '',
    'show_option_none'   => '',
    'option_none_value'  => '',
    'orderby'            => 'name', 
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1, 
    'child_of'           => 94,
    'exclude'            => '',
    'echo'               => 1,
    'selected'           => 0,
    'hierarchical'       => true, 
    'name'               => 'cat',
    'id'                 => '',
    'class'              => 'postform',
    'depth'              => 1,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,
    'value_field'	     => 'term_id',	
); ?>


<?php wp_dropdown_categories( $State ); ?>



</section>
7

I haven’t used JSON before so I’m looking at it now to understand it. thx

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.