Javascript - 将输入字段的值设置为等于从下拉列表中选择的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10790065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - set value of input field equal to value selected from drop down list
提问by Smudger
I have a PHP based form. It has a drop down list which fetches values from the mysql database.
我有一个基于 PHP 的表单。它有一个下拉列表，可以从 mysql 数据库中获取值。
<select name=cat onchange="AjaxFunction(this.value);" style="width=600"> <br>
<option value='' Select One</option>
<br>
<?
require "config.php";// connection to database
$q=mysql_query("select cat_id from categories");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[cat_id]>$n[category]</option>";
}
?>
</select>
The drop down list works 100%. I then have another text input field,
下拉列表 100% 有效。然后我有另一个文本输入字段，
<input type=text name=copycat>
I want the value of the copycat input box to be equal to the selected value of the drop down list and to update in real time.
我希望山寨输入框的值等于下拉列表的选定值并实时更新。
Can this be done? I should imagine quite easily. I am thinking something like:
这能做到吗？我应该很容易想象。我在想这样的事情：
<input type=text name=copycat onBlur="document.getElementById('cat').value=this.value;">
Any help would be appreciated.
任何帮助，将不胜感激。
Thanks and Regards, Ryan
感谢和问候，瑞安
UPDATE
更新
Code to get the javscript sendValue working with value of copycat.
使用 copycat 值获取 javscript sendValue 的代码。
catalin87, please assist with getting sendvalue working, currently, clicking the select button has no response fromthe browser.
catalin87，请协助让发送值工作，目前，点击选择按钮浏览器没有响应。
Thanks again, Ryan
再次感谢，瑞安
<?
$con = mysql_connect('localhost', 'username', 'password');
if (!$con)
{
die('Could not connect to server: ' . mysql_error());
}
$db=mysql_select_db("database", $con);
if (!$db)
{
die('Could not connect to DB: ' . mysql_error());
}
$sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
$result=mysql_query($sql);
?>
<script type="text/javascript">
function AjaxFunction(cat_id) {
var httpxml;
try {
// Firefox, Opera 8.0+, Safari
httpxml = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
httpxml = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck() {
if (httpxml.readyState == 4) {
var myarray = eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for (j = document.testform.subcat.options.length - 1; j >= 0; j--) {
document.testform.subcat.remove(j);
}
for (i = 0; i < myarray.length; i++) {
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.testform.subcat.options.add(optn);
}
}
}
var url="dd.php";
url = url+"?cat_id="+cat_id;
url = url+"&sid="+Math.random();
httpxml.onreadystatechange = stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
}
</script>
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("subcat");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("copycat").value=catSelected;
}
</script>
<script type="text/javascript">
function sendValue(value)
{
value = e.options[e.selectedIndex].value;
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, value);
window.close();
}
</script>
<form name="testform">
Category: <select name=cat id=cat onchange="AjaxFunction(this.value);" style="width=600"> <br>
<option value='' style="width=600">Select One</option>
<br>
<?
require "config.php";// connection to database
$q=mysql_query("select * from categories");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[cat_id]>$n[category]</option>";
}
?>
</select>
<br><br>
Pack Code:
<select name=subcat onchange="updateinput();" >
<br><br>
</select>
<br><br>
<input type=text name=copycat id=copycat >
<br><br>
<td><input type=button value="Select" onClick="sendValue(document.getElementById(copycat))" /></td>
</form>
回答by catalin87
1`st set an id to the select box and to the input, and add an onChange event:
1`st 为选择框和输入设置一个 id，并添加一个 onChange 事件：
<select name=cat id=cat onchange="updateinput();" style="width=600">
<input type=text name=copycat id=copycat >
Then put this function somewhere:
然后把这个函数放在某个地方：
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].text;
document.getElementById("copycat").value=catSelected;
}
</script>
This will populate withe the label of the selected item, if u want the value of the selected item use this function:
这将填充所选项目的标签，如果您想要所选项目的值，请使用此功能：
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("copycat").value=catSelected;
}
</script>
here is your full code:
这是您的完整代码：
<?
$con = mysql_connect('localhost', 'username', 'password');
if (!$con)
{
die('Could not connect to server: ' . mysql_error());
}
$db=mysql_select_db("dbname", $con);
if (!$db)
{
die('Could not connect to DB: ' . mysql_error());
}
$sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
$result=mysql_query($sql);
?>
<script type="text/javascript">
function AjaxFunction(cat_id) {
var httpxml;
try {
// Firefox, Opera 8.0+, Safari
httpxml = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
httpxml = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck() {
if (httpxml.readyState == 4) {
var myarray = eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for (j = document.testform.subcat.options.length - 1; j >= 0; j--) {
document.testform.subcat.remove(j);
}
for (i = 0; i < myarray.length; i++) {
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.testform.subcat.options.add(optn);
}
}
}
var url="dd.php";
url = url+"?cat_id="+cat_id;
url = url+"&sid="+Math.random();
httpxml.onreadystatechange = stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
}
</script>
<script type="text/javascript">
function sendValue(value)
{
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, value);
window.close();
}
</script>
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("copycat").value=catSelected;
}
</script>
<form name="testform">
Category: <select name=cat id=cat onchange="updateinput();" style="width=600"> <br>
<option value='' style="width=600">Select One</option>
<br>
<?
require "config.php";// connection to database
$q=mysql_query("select * from categories");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[cat_id]>$n[category]</option>";
}
?>
</select>
<br><br>
Pack Code:
<select name=subcat >
<br><br>
</select>
<br><br>
<input type=text name=copycat id=copycat >
<br><br>
<td><input type=button value="Select" onClick="sendValue('<?php echo $rows['packcode']; ?>')" /></td>
</form>
I changed:
我变了：
Put : onchange="updateinput();"
把： onchange="updateinput();"
<select name=cat id=cat onchange="updateinput();" style="width=600">
and
和
<input type=text name=copycat id=copycat >
remove:
消除：
onBlur="document.getElementById('cat').value=this.value;"
回答by mgraph
you should add id="cat"to :
你应该添加id="cat"到：
<select name="cat" id="cat" onchange="AjaxFunction(this.value);" style="width=600">
and:
和：
echo "<option value='".$n['cat_id']."'>".$n['category']."</option>";
demo : http://jsfiddle.net/V94AJ/
