Javascript 在php中从多维数组创建两个下拉框，一个用于键，另一个用于键中的项

我有一个多维php数组，如下所示：

$country = array ("India" => array("Maharashtra","Tamil Nadu","West Bengal"),
                  "USA"=> array ("New York", "California", "Florida"),
                  "Canada"=>array("Ontario", "Alberta", "Manitoba"));   

我想创建两个下拉框。其中一个将有国家名称。另一个将具有状态名称，当选择第一个框时将填充该名称

我已经为第一个框编写了代码：

echo "<select name='name'>\n";
foreach($country as $key => $item) {
    echo "\t<option>$key</option>\n";
}
echo "</select>\n";

echo“\n”；
foreach（$key=>$item的国家/地区）{
回显“\t$key\n”；
}
回音“\n”；

有人能建议我如何创建下一个下拉框吗？

试试这个：

// Build country array
$country = array ("India" => array("Maharashtra","Tamil Nadu","West Bengal"),
                  "USA"=> array ("New York", "California", "Florida"),
                  "Canada"=>array("Ontario", "Alberta", "Manitoba"));   

// Output the country selection
echo '<select name="country_name" id="country_select">';
foreach($country as $countryName => $states) {
    echo '<option value="'.$countryName.'">'.$countryName.'</option>';
}
echo '</select>';

// Output a select for the state selection per country
foreach($country as $countryName => $states) {
    echo '<select class="state_dropdown" name="states_'.$countryName.'" style="display: none;">';
    foreach($states as $state){
        echo '<option value="'.$state.'">'.$state.'</option>';
    }
    echo '</select>';
}

---

它会起作用的。循序渐进

YourPage.php

<?
$country = array ("India" => array("Maharashtra","Tamil Nadu","West Bengal"),
                  "USA"=> array ("New York", "California"),
                  "Canada"=>array("Ontario", "Alberta", "Manitoba")); 
?>

<div class='country'>
    <select name="country_name" class="Country">
    <?
    foreach($country as $countryName => $states) {?>
        <option value="<? echo $countryName;?>"><?echo $countryName?></option>
    <?}?>
    </select>
</div>

<div class="State">
    <select>
        <option>Select Country</option>
    </select>
</div>

看看这个示例代码。据我所知，您不想使用数据库或其他ajax调用，因此我用所有状态填充了javascriopt缓存变量对象

    <?php
$data = array("India" => array("Maharashtra", "Tamil Nadu", "West Bengal"),
    "USA" => array("New York", "California"),
    "Canada" => array("Ontario", "Alberta", "Manitoba"));
$countries = array_keys($data);
?>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<script>
//Store country as a javascript object
    var countries = <?php echo json_encode($data); ?>;
    $(document).ready(function () {
        $('select[name="countries"]').change(function () {
            var country_val = $(this).val();
            if (countries[country_val]) {
                var options = '<option value = "">Select State</option>';
                for (i in countries[country_val]) {
                    var state = countries[country_val][i];
                    options += '<option value = "' + state + '">' + state + '</option>';
                }
                $('select[name="states"]').html(options);
            }
        });
    });
</script>

<!--First Dropdown-->
<div class="country">
    <select name="countries">
        <?php foreach ($countries as $country): ?>
            <option value="<?php echo $country; ?>"><?php echo $country ?></option>
<?php endforeach; ?>
    </select>
</div>
<!--Second Dropdown-->
<div class="states">
    <select name="states">
        <option>Select State</option>
    </select>
</div>


//将country存储为javascript对象
var国家=；
$（文档）.ready（函数（）{
$（'select[name=“countries”]”）。更改（函数（）{
var country_val=$（this.val（）；
if（国家[国家/地区]）{
变量选项='选择状态'；
（i在国家[国家/地区]）{
var state=国家[国家][i]；
选项+=''+状态+''；
}
$（'select[name=“states”]”）html（选项）；
}
});
});
您必须使用javascript在更改第一个选择时构建第二个选择框。否则，如果不知道在第一个框中选择了什么，您将不知道在第二个框中放置什么。您需要在第一个循环中循环$item，然后在第一个循环中循环。@JoshKG我试图循环$item，但选择框是空的。@JonathanKuhn是正确的，这是一个分两部分的过程。首先，您需要将状态数组输出到DOM中，或者只是输出到javascript对象中，然后在知道选择了哪个国家后，使用javascript动态构建选择选项。@JonathanKuhn如果该值在数据库中，我可以使用javascript填充下一个选择框。但是现在，如何从数组中获取数据？这里显示所有状态。它们不依赖于国家/地区框。我对@masoncd的建议是，请在数据库中为国家/地区和州制作单独的表格。这会很容易解决你的问题。只是一个建议。不是强制性的。@masonCOD是的，它们都是输出。正如我在回答中所说的，这将要求您编写javascript来隐藏4个州的选择，并根据用户对国家/地区下拉列表的选择显示相应的选择。PHP无法在没有JS的情况下更改前端的下拉列表。@要开始使用JS，只需将style=“display:none；”添加到状态选择元素中即可。然后，在country下拉列表中添加一个jQuery.change（）函数，根据选择显示正确的state_uu下拉列表@MikelBitson您能建议我如何编写javascript，以便根据所选国家选择州吗。
<script>
$('.Country').change(function(){
    var StateName= $('.Country').val();
    $.ajax({url:"AjaxSelectState.php?CountryName="+CountryName,cache:false,success:function(result){
        $('.State').html(result);
    }});
});
</script>

<?
$CountryName=$_GET['CountryName'];
$totalState=sizeof($country[$CountryName]);
?>
<select name="states_<?echo $CountryName;?>">
    <?
    for($i=0;$i<$totalState;$i++)
    {?>
    <option value="<?echo $country[$CountryName][$i];?>"><?echo $country[$CountryName][$i];?></option>
    <?}?>
</select>

    <?php
$data = array("India" => array("Maharashtra", "Tamil Nadu", "West Bengal"),
    "USA" => array("New York", "California"),
    "Canada" => array("Ontario", "Alberta", "Manitoba"));
$countries = array_keys($data);
?>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<script>
//Store country as a javascript object
    var countries = <?php echo json_encode($data); ?>;
    $(document).ready(function () {
        $('select[name="countries"]').change(function () {
            var country_val = $(this).val();
            if (countries[country_val]) {
                var options = '<option value = "">Select State</option>';
                for (i in countries[country_val]) {
                    var state = countries[country_val][i];
                    options += '<option value = "' + state + '">' + state + '</option>';
                }
                $('select[name="states"]').html(options);
            }
        });
    });
</script>

<!--First Dropdown-->
<div class="country">
    <select name="countries">
        <?php foreach ($countries as $country): ?>
            <option value="<?php echo $country; ?>"><?php echo $country ?></option>
<?php endforeach; ?>
    </select>
</div>
<!--Second Dropdown-->
<div class="states">
    <select name="states">
        <option>Select State</option>
    </select>
</div>