javascript - 使用 select1 上的选定值填充 select2，无需刷新页面或使用按钮

Question

我是 PHP、Javascript 的初学者，我想使用选择“peoplesnames”上的选定值来填充选择“info”，而无需刷新页面或使用按钮

这是我的代码

HTML:

<select id="peoplesnames" name="peoplesnames" onchange=" $person<<--Somthings here to get selected ">

   ` <option value="1">john</option>`
    `<option value="2">sarah</option>`
   ` <option value="3">samantha</option>`
`</select>`

PHP

<?php

echo '<select style="width: 110px; name="infos">';

$requete = mysql_query('SELECT city FROM people where id=$person');

$requete2 = mysql_query('SELECT age FROM people where id=$person');

$nmbrrows = mysql_numrows($requete);

for ($i=0; $i<$nmbrrows ; $i++) {

$city = mysql_result($requete,$i);

$age = mysql_result($requete2,$i);

echo '<option value="'.$age.'"> '.$city.' </option>';

}

echo '</select>';

?>

我需要在代码中添加什么？请告诉我是否有其他解决方案，谢谢

Answer 1

我建议执行一些 jQuery 来检测选择框上的更改事件，然后检测所选值是什么。

在后端，我将创建一个 PHP 端点，它接收所选的 id/值，并返回您想要的 SQL 结果。

使用 onchange 事件，使用 Jquery $.post 将选定的值传递到您的 php 代码，然后获取响应并使用该用户信息更新页面上的分区。

一个例子是:

$("#peoplesnames").change(function(){
    var id = $('#peoplesnames :selected').val();
    $.post( "test.php", { id: id}).done(function( data ) {
          $("#info p").text(data);
       });

});

这将检测选择值何时发生更改，获取所选项目的值，将该值传递给您的 PHP 脚本，从中获取响应并将其添加到 <p> #info 部门中的标签。

您的 PHP 脚本可能类似于:

<?php
   $id = $_POST['id'];
   $request = mysql_query('SELECT * FROM people where id = $id');
   $data = mysql_result($request);

   $response = "The person named ".$data['name']." is ".$data['age']." and lives in ".$data['city']." Happily everafter.";
   return $response;

 ?>

您当然需要按照您想要的方式设置格式，但这应该在每次更改组合框的选择时提取特定人员的数据并填充一个分区。