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

1'st 为选择框和输入设置一个 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> 

我改变了：

把 ： 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;"

您应该将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/