Question

我一直在尝试使用Jquery和一个下拉框填充输入表单但没有成功，我试图找到解决方法，直到我最终能够弄明白。我想知道是否可以使用sql填充下拉列表然后一旦选中该值并运行sql命令以获取其余的数据行和$ _GET到输入字段。

我一直在检查样本，但大多数样本输出表数据，找不到任何会拉到输入字段的内容，因此我可以将表单处理成数据库。

我正在寻找一个想法或方向，我应该在哪里寻找这样的任务，任何帮助将不胜感激。

Answer 1

test.php的

       <? 


       if(isset($_GET['name'])) {
       /*Some queries if need*/
       echo '{"name":"yiu send name ['.$_GET['name'].'] and may be some other data'.'"}';
       }
        else {

       $bd_host='localhost';
       $bd_user='root';
       $bd_password='';
       $bd_base='db_name';

       /*connect to db*/
       $con=mysql_connect($bd_host, $bd_user, $bd_password); 

       /*control connection*/
       if(!con) {
       echo 'Error.'; 
       exit; 
       }

       /*select databese name*/
       mysql_select_db($bd_base, $con); 

       /*set encode to utf-8*/
       mysql_query('SET NAMES utf8');



       $sql="Select name from users limit 10"
       $res=mysql_query($sql);
       ?>
       <head>
       <style>
       div{background-color:red;width:150px;color:white;}
       ul{display:none;position:absolute;width:150px;margin:0;padding:0;background-color:yellow;color:black;}
       div:hover ul{display:block;}
       .filled{background-color:blue;}
       </style>
       </head>
       <div>button<ul>
       <?
       While($row=mysql_fetch_assoc($res)) { ?>
       <li onclick="ajax('<? echo $row['name']; ?>');return false;"><? echo $row['name']; ?></li>
       <?
       }
       ?>
       </ul></div>
       <input type="text" value="none" id="id1">
       <?
       }
       ?>

       <script>           
       function ajax(name) {
       var url='/test.php?name='+name;

        if (window.XMLHttpRequest) {
                   xmlhttp = new XMLHttpRequest();
               } else if (window.ActiveXObject) {
                   xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
               }
                   xmlhttp.open('GET', url, true);

               xmlhttp.onreadystatechange = function() {
                   if (xmlhttp.readyState == 4) {
                       myfunction(xmlhttp.responseText);
                   }
               }

                   xmlhttp.send(null );


               function myfunction(response) {
       var= arr; 
       arr = JSON.parse(response);
       document.getElementById('id1').value=arr.name;
       document.getElementById('id1').className='filled';
       alert ('The input was filled with '+arr.name);
       }

       }
       </script>    

      /*END of test.php*/

Answer 2

好吧，通过使用JQuery Library并编写自己的PHP功能，您可以轻松实现这一目标。

您需要和HTML选择框：

str

用于获取Select Box数据的JQuery Ajax请求，当您的Web文档准备就绪时将触发该数据，而选择框的Onchange事件将使用POST类型的其他Ajax请求：

<select id="myselectbox">
    <option>Select</option>
</select>
<input type="text" id="myinputbox">

你的.PHP文件将收到AJAX请求：

<script type="text/javascript">
$( document ).ready(function() {

  $.get( "myfunctions/get_records_for_select.php", function( data ) {
    //Look we will change the HTML content for our select-box on success
    $( "#myselectbox" ).html( data );
  });

  $( "#myselectbox" ).change(function() {

    $.post( "myfunctions/get_records_by_id.php", { selectedId: $(this).val() })
    .done(function( data ) {
      $( "#myinputbox" ).val( data );
    });

 });
});
</script>

你的第二个.PHP文件将收到POST TYPE AJAX请求：

// your get_records_for_select.php file

$yourSql = "select ...";
$results = run_sql($yourSql);
$html = "<option>Select</option>";
foreach($results as $record){
    $html .= "<option value='".$record['id']."'>".$record['title']."</option>";
}

echo $html;exit;

我希望你现在可以得到一些想法：）

我可以使用ajax按钮获取下拉值并填写表单

2 个答案: