Question

我有一个名为$ programDates_items的php数组，它包含一些在每个程序中有多个日期的值（学校程序）。我还有一个带有选择输入的表单，用于＆＃34;感兴趣的程序＆＃34;，其中选项代表每个程序。

我想构建一个函数，以便在选择感兴趣的程序时，选择一个名为＆＃34; date＆＃34;已更新，以便填充由programDates中相应日期值组成的选项。

问题在于我不知道如何结合php和javascript来实现这一目标。

下面我已经包含了$ programDates_items数组的输出，以及数组所属表单的部分。

$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>

我想这样做某事 ......

$( "#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~
    }
});

如何更新＆＃34; start_date＆＃34;根据＆＃34; program_of_interest＆＃34;中选择的选项，从$ programDates_items php数组中选择带有程序日期的输入。输入

Answer 1

将 $ programDates_items 的结构更改为如下对象：

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}));
    })
});

＆＃13;

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}));
    })
});

＆＃13;

<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>

＆＃13;

相反，如果你的 $ programDates_items 是一个数组数组，如：

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}));
    })
});

＆＃13;

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}));
    })
});

＆＃13;

<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>

＆＃13;

问题是我的程序/日期数组是一个php数组，因此我不能在javascript函数中使用它，除非我误解。

为了获得第一个对象，在PHP中你需要写：

$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")));

在javascript中你可以获得变量写作：

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

如果你需要第二个对象，在PHP中你需要写：

$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")));

并在javascript中：

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

有关详情，请参阅json_encode

选择其他选择选项时，更新带有变量值的选择列表？

1 个答案: