使用与 PHP 下拉列表中的选定值对应的值填充文本字段 - Populating textfield with value that corresponds the selected value from a dropdown in PHP

Populating textfield with value that corresponds the selected value from a dropdown in PHP

我的mysql数据库中有两个字段，分别是ItemDescription和StockNo。项目描述填充下拉列表。从下拉列表中选择一个值后，我想使用与所选项目描述相对应的 StockNo 填充文本字段。我没有要显示的代码(除了我插入的表单控件(。我听说这可以通过 AJAX 实现，但我没有找到教程。提前谢谢你！

另外，如果这很重要，我正在使用Adobe Dreamweaver CS5。

将数字放在所选选项的 value 属性中：

<select id="dropdown">
    <option value="">Select an option …</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

添加输入以显示值：

<input type="text" id="value" />

并使用 JavaScript 使其工作：

window.onload = function() {
    document.getElementById("dropdown").onchange = function() {
        document.getElementById("value").value = this.options[this.selectedIndex].value;
    }
}

示例(小提琴(：http://jsfiddle.net/jhogervorst/nYADy/

一个简单的基本解决方案可能看起来像这样。

<html>
<body>
Item Description <select id="ItemDescription" onchange="populate()">
<option value="Item1">Item1</option>`</select>
<br/>
Stock No <input type="text" id="StockNo" value=""/>
</body>
</html>

JS部分.....

var xmlHttp;
function createXmlHttpRequest() {
     if(window.ActiveXObject)   {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if(window.XMLHttpRequest){
         xmlHttp = new XMLHttpRequest();      
     }
}
function populate() {
    createXmlHttpRequest(); 
var param = document.getElementById('ItemDescription').value;
    xmlHttp.open("GET", "http://localhost:9444/populate?itemdesc="+param, true);
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.send(null);    
 }

 function handleStateChange() {  
   if(xmlHttp.readyState==4) {   
       if(xmlHttp.status==200){         
         var stockNo = xmlHttp.responseText                       
         document.getElementById('StockNo').value = stockNo;                                              
    }
    else
        alert("Error Loading Page" + xmlHttp.status + xmlHttp.statusText);  
    }
 }

}