动态下拉菜单

Posted 2023-02-24

【中文标题】动态下拉菜单

【英文标题】：Dynamic drop down menus

【发布时间】：2013-11-05 01:36:00

【问题描述】：

我想创建一个，其中第二个下拉菜单的选项在选择第一个下拉菜单后发生变化。

test.php 文件

<?php
$con=mysqli_connect("localhost","******","****","******");
// Check connection
if (mysqli_connect_errno())

echo "Failed to connect to MySQL: " . mysqli_connect_error();


$result = mysqli_query($con,"SELECT * FROM countries");
?>
<select id="country" name='country' onchange="get_states();">
<option value=''>Select</option>
<?php
while($row = mysqli_fetch_array($result))

echo "<option value='" . $row['country_id'] . "'>" . $row['country_name'] . "</option>";

?>
</select>
<div id="get_state"></div> // Sub will be appended here using ajax

<script type="text/javascript">
function get_states()  // Call to ajax function
var country = $('#country').val();
var dataString = "country="+country;
$.ajax(
    type: "POST",
    url: "getstates.php", // Name of the php files
    data: dataString,
    success: function(html)
    
        $("#get_state").html(html);
    
);

</script>
<?php
mysqli_close($con);
?>

而gestates.php是：

<?php if ($_POST) 
$country = $_POST['country'];
if ($country != '') 
   $sql1 = "SELECT * FROM states WHERE country_id=" . $country;
   $result1 = mysql_query($sql1);
   echo "<select name='state'>";
   echo "<option value=''>Select</option>"; 
   while ($row = mysql_fetch_array($result1)) 
      echo "<option value='" . $row['id'] . "'>" . $row['state_name'] . "</option>";
   echo "</select>";

else

    echo  '';


?>

但是上面的代码不起作用！

【问题讨论】：

你到底遇到了什么错误？？？

没有错误。 link

【参考方案1】：

在第一个下拉菜单发生更改时，您需要进行 ajax 调用，该调用将获取选项，然后您可以填充下一个下拉菜单

【参考方案2】：

尝试在 $country 周围添加单引号

$sql1 = "SELECT * FROM states WHERE country_id='" 。 $国家。 "'";

或

$sql1 = "SELECT * FROM states WHERE country_id='$country'";

编辑：另外，您只能回显一个结果。 Jquery 将忽略您的第二个回显，因为第一个回显将被视为成功。

您应该以不同的方式格式化您的结果。

也许是一个 json 编码的数组。

在你的 php 中：

while($row = mysql_fetch_array($result1))

      $data[$row['id']] = $row['state_name'];


echo json_encode($data);

在你的 Jquery 中设置 dataType: 'json'

$.each(html,function(key,value)

      $("#get_state").append($('<option>', 
               value:key,
           text: value
    ));
);