Javascript -将输入字段的值设置为从下拉列表中选择的值

Question

我有一个基于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> 

下拉列表工作100%。然后我有另一个文本输入字段，

<input type=text name=copycat>

我希望复制输入框的值等于下拉列表的选定值，并实时更新。

这能办到吗？我可以很容易地想象。我的想法是：

<input type=text name=copycat onBlur="document.getElementById('cat').value=this.value;">

任何帮助都将不胜感激。

谢谢和问候，瑞恩

更新

让javscript sendValue使用copycat值的代码。

catalin87，请协助使sendvalue工作，目前，单击select按钮没有从浏览器中得到响应。

再次谢谢你，莱恩

<? 

  $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: &nbsp; <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> 

Answer 1

1‘第一次将id设置为复选框和输入，并添加一个onChange事件：

<select name=cat id=cat onchange="updateinput();" style="width=600">
<input type=text name=copycat id=copycat >

然后把这个函数放在一个地方：

<script type="text/javascript">
function updateinput(){
var e = document.getElementById("cat");
var catSelected = e.options[e.selectedIndex].text;

document.getElementById("copycat").value=catSelected;
}    
</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>   

这是您的完整代码：

     <? 

  $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: &nbsp; <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> 

我改变了：

Put : onchange="updateinput();"

<select name=cat id=cat onchange="updateinput();" style="width=600">

和

<input type=text name=copycat id=copycat >

移除：

 onBlur="document.getElementById('cat').value=this.value;"

Answer 2

您应该将id="cat"添加到：

<select name="cat" id="cat" onchange="AjaxFunction(this.value);" style="width=600"> 

以及：

echo "<option value='".$n['cat_id']."'>".$n['category']."</option>"; 

演示：http://jsfiddle.net/V94AJ/