javascript自动填充基于下拉选择的文本输入

时间:2012-05-09 23:13:17

标签: php javascript ajax arrays

我遇到了这个问题...希望在从下拉列表中选择用户名时自动填写表单中的文本输入框。 Users数组来自mysql数据库。不确定我是否正确编写了javascript。首先是我的数组,它将作为$ users从db调用。谢谢你的期待。

<?php 
    $users=array
    (
        "User" => array 
        (
            "0" => array
                            (
                            "id" => "6",
                            "username" => "bsmith",
                            "full_name" => "Buddy Smith"
                            ),
            "1" => array
                            (
                            "id" => "2",
                            "username" => "lsmith",
                            "full_name" => "Libbie Smith"
                            ),
            "2" => array
                            (
                            "id" => "4",
                            "username" => "asmith",
                            "full_name" => "Andy Smith"
                            ) 
        )
    )
?>

然后是javascript:

<script type="text/javascript">
var ids = new Array();
var use = new Array();
var ful = new Array();
    <?php
        foreach($users as $key=>$value) {
            echo "ids[" . $key . "] = '" . $value['User']['id'] . "';\n";
            echo "use[" . $key . "] = '" . $value['User']['username'] . "';\n";
            echo "ful[" . $key . "] = '" . $value['User']['full_name'] . "';\n";
        }
        ?>

        function Choice() {
            x = document.getElementById("users");
            x.value = y.options[y.selectedIndex].text;
            document.getElementById("ids") = ids[y.selectedIndex];
            document.getElementById("use") = use[y.selectedIndex];
            document.getElementById("ful") = ful[y.selectedIndex];
           }

        }
</script>

然后是我的HTML:

<form name="form1" method="post" action="">
<select name="users" onChange='Choice();'><option> </option>
<?php
foreach ($users as $key=>$value) {
echo '<option value="'.$key.'">'.$value['User']['username'].'</option>';
}
?>
</select>
<p><input type="text" id="ids" name="id" ></p>
<p><input type="text" id="ful" name="full_name" ></p>
</form>

2 个答案:

答案 0 :(得分:6)

我采取了一些自由,并没有真正理解PHP,所以我编写了这些部分。无论如何,这就是我得到的:

http://jsfiddle.net/zunrk/

<html>
  <head>
    <style type="text/css">

    </style>
    <script type="text/javascript">
var ids = new Array();
var use = new Array();
var ful = new Array();

ids[0] = "";
use[0] = "";
ful[0] = "";

ids[1] = 6;
use[1] = "bsmith";
ful[1] = "Buddy Smith";

ids[2] = 2;
use[2] = "lsmith";
ful[2] = "Libbie Smith";

ids[3] = 4;
use[3] = "asmith";
ful[3] = "Andy Smith";


        function Choice() {
            //x = document.getElementById("users");
            y = document.getElementById("selectUsers");

              //x.value = y.options[y.selectedIndex].text;
              document.getElementById("ids").value = ids[y.selectedIndex];
              document.getElementById("use").value = use[y.selectedIndex];
              document.getElementById("ful").value = ful[y.selectedIndex];
         }


    </script>
  </head>
  <body>
<form name="form1" method="post" action="">
<select id="selectUsers" name="users" onChange='Choice();'><option> </option>
<option value="1">bsmith</option>
<option value="2">lsmith</option>
<option value="3">asmith</option>
</select>
<p>ids <input type="text" id="ids" name="id" ></p>
<p>use <input type="text" id="use" name="username" ></p>
<p>ful <input type="text" id="ful" name="full_name" ></p>
</form>
  </body>
</html>

答案 1 :(得分:0)

如果我正确理解了您的问题,则需要设置输入文本字段的文本。您可以通过设置“值”字段来完成此操作。

    function Choice() {
        x = document.getElementById("users");
        x.value = y.options[y.selectedIndex].text;
        document.getElementById("ids").value = ids[y.selectedIndex];
        document.getElementById("use").value = use[y.selectedIndex];
        document.getElementById("ful").value = ful[y.selectedIndex];
    }