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

标签 javascript select drop-down-menu input

我有一个基于 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 正常工作，目前，单击选择按钮浏览器没有响应。

再次感谢， 瑞安

<? 

  $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>

最佳答案

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

关于Javascript - 将输入字段的值设置为等于从下拉列表中选择的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10790065/

上一篇：php - AJAX:PHP函数返回1，但 'success'部分说它返回0

下一篇：javascript - html5中 Sprite 图像的x-y坐标和宽度-高度

相关文章：

javascript - 如何以编程方式打开 jQuery Mobile 弹出窗口并在 5 秒后关闭它

SQL:通过多个表获取客户的总份额

javascript - 设置接收到的全日历事件的结束日期失败并出现错误

用案例选择

MySQL:提取元素最常见的值

html - <div> 下拉菜单自定义

ajax - 通过 Ajax 将下拉选择的值(列表)作为参数传递给 Controller

html - 使用 Python-Flask 使用来自 postgresql 数据库的数据填充 html 下拉列表

javascript - 使用 if 语句为变量赋值

javascript - 如何在 jQuery Mobile 中构造元素

©2024 IT工具网  联系我们