Update select list with variable values when other select option is selected?

Question

I have a php array called $programDates_items, which contains some values (school programs) with multiple dates inside each program. I also have a form with a select input for "program of interest", with options representing each program.

I want to build a function so that when a program of interest is selected, a select input called "dates" is updated so that it is filled with options made up of corresponding date values from the programDates.

The problem is that I don't know how to go about marrying php and javascript in order to accomplish this.

Below I have included the output for the $programDates_items array, and the section of the form the array pertains to.

$programDates_items = Array ( [Animation] => Array ( [January 1, 2018] => January 1, 2018 [April 28, 2018] => April 28, 2018 ) [Game Design] => Array ( [February 20, 2018] => February 20, 2018 [June 28, 2018] => June 28, 2018 [October 20, 2018] => October 20, 2018 ) 

<select id="program_of_interest" name="program_of_interest" required="">
    <option value="">Program of Interest</option>
    <option value="animation">Animation</option>
    <option value="gameDesign">Game Design</option>
</select>

<select id="start_date" name="start_date" required="">
    <option value="">Start Date</option>            
</select>

I want to do something like this...

$( "#program_of_interest" ).change(function() {
    $selected_program = $("#program_of_interest").val(); 
    if ($select_program == "animation") {
      ~loop through $programDates_items array and output the 'Animation' array values as <option>~
    } else {
      ~else~
    }
});

How do I update the "start_date" select input with the program dates from the $programDates_items php array based on the selected option from the "program_of_interest" input?

Answer 1

Changing the structure of $programDates_items to an object like:

var values = {animation: ["January 1, 2018", "April 28, 2018"], 
      gameDesign: ["February 20, 2018", "June 28, 2018", "October 20, 2018"]};

The solution to your problem is:

$( "#program_of_interest" ).on('change', function(e) {
    $("#start_date").empty();
    (values[$(this).val()] || ['Start Date']).forEach(function(ele, idx) {
        $("#start_date").append($('<option/>', {text: ele, value: ele}));
    })
});

 var values = {animation: ["January 1, 2018", "April 28, 2018"], gameDesign: ["February 20, 2018", "June 28, 2018", "October 20, 2018"]}; $( "#program_of_interest" ).on('change', function(e) { $("#start_date").empty(); (values[$(this).val()] || ['Start Date']).forEach(function(ele, idx) { $("#start_date").append($('<option/>', {text: ele, value: ele})); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="program_of_interest" name="program_of_interest" required=""> <option value="">Program of Interest</option> <option value="animation">Animation</option> <option value="gameDesign">Game Design</option> </select> <select id="start_date" name="start_date" required=""> <option value="">Start Date</option> </select> 

Instead, if your $programDates_items is an array of array like:

var values = [["January 1, 2018", "April 28, 2018"], ["February 20, 2018", "June 28, 2018", "October 20, 2018"]];

The solution can be:

$( "#program_of_interest" ).on('change', function(e) {
    $("#start_date").empty();
    (values[this.selectedIndex - 1] || ['Start Date']).forEach(function(ele, idx) {
        $("#start_date").append($('<option/>', {text: ele, value: ele}));
    })
});

 var values = [["January 1, 2018", "April 28, 2018"], ["February 20, 2018", "June 28, 2018", "October 20, 2018"]]; $( "#program_of_interest" ).on('change', function(e) { $("#start_date").empty(); (values[this.selectedIndex - 1] || ['Start Date']).forEach(function(ele, idx) { $("#start_date").append($('<option/>', {text: ele, value: ele})); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="program_of_interest" name="program_of_interest" required=""> <option value="">Program of Interest</option> <option value="animation">Animation</option> <option value="gameDesign">Game Design</option> </select> <select id="start_date" name="start_date" required=""> <option value="">Start Date</option> </select> 

The problem is that my array with the programs/dates is a php array, hence I can't use it in a javascript function unless I'm misunderstanding.

In order to obtain the first object, in PHP you need to write:

$programDates_items = json_encode(array('animation' => array(0 => "January 1, 2018", 1 => "April 28, 2018"), 
          'gameDesign' => array(0=>"February 20, 2018", 1=>"June 28, 2018", 2=>"October 20, 2018")));

and in javascript you can obtain the variable writing:

var values = <?php echo $programDates_items; ?>;

If you need the second object, in PHP you need to write:

$programDates_items = json_encode(array(0 => array(0 => "January 1, 2018", 1 => "April 28, 2018"), 
        1 => array(0=>"February 20, 2018", 1=>"June 28, 2018", 2=>"October 20, 2018")));

and in javascript:

var values = <?php echo $programDates_items; ?>;

For details you can see json_encode