javascript根据下拉选择自动填充文本输入 [英] javascript auto fill text inputs based on drop down selection
本文介绍了javascript根据下拉选择自动填充文本输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了麻烦...希望在从下拉列表中选择用户名后自动在表单中填写文本输入框。用户数组来自mysql数据库。不确定我的JavaScript是否正确编写。首先是我的数组，它将作为$ users从db调用。
I'm having trouble with this... Hoping to auto fill the text input boxes in my form upon selection of the username from the dropdown. Users array comes from a mysql db. Not sure I have the javascript written correctly. First is my array which will just get called from db as $users. Thanks for looking.
<?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：
then the 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>
推荐答案
我有一些自由，并不真正理解PHP，所以我组成了那些部分。无论如何，这就是我得到的：
I took some liberties, and don't really understand PHP so I made up those parts. Anyway, here's what I got:
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>
这篇关于javascript根据下拉选择自动填充文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
