javascript - 根据下拉菜单中的项目选择在文本框中显示价格

Question

我在 input 的 select 中显示商品价格时遇到问题。这是到目前为止我的代码:

<table border="1"> 
  <tr>
    <td>
    <select name="productName" onchange="changeValue(this.value)">
    <option value="0">Product</option>
    <?php
    $query = "SELECT * FROM tblProduct ORDER BY productName ASC";
    $result = mysqli_query($conn, $query);
    $test123 = "var dtPRD= new Array();\n"; 
    while ( $data=mysqli_fetch_array($result)) {
echo "<option value='{".$data['productCode']."}'>".$data['productName']."
</option>";
$test123 .= "dtPRD['" . $data['productName'] . "'] = {productPrice:'" . 
($data['productPrice']). "'};\n"; 
}
?>
</select>       
</td>
<td>
Price<input type="text" name="productPrice">
</td>
</tr>
</table>
<script type="text/javascript">   
<?php 
echo $test123; 
?> 
function changeValue(productName){ 
document.getElementByName'namaProduk').value = 
dtPRD[productName].productPrice;
}; 
</script>

例如，如果从下拉列表中选择商品 A，我希望商品 A 的价格显示在我的输入中。目前，我的代码没有执行此操作。

图片:

Answer 1

尝试这段代码 - 我使用了一个数组来实现你想要的!

您还可以生成一个多维数组来指向产品。

要从 php 或数据库获取数组:解释 here !

var array = ["919$","929$","939$","949$"];

function changeValue(productName) {
  document.getElementById('productPrice').value = array[productName];
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      <select name="productName" onchange="changeValue(this.value)">
        <option >Product</option>
        <option name="product" value="0">Product-Name 1</option>
        <option name="product" value="1">Product-Name 2</option>
        <option name="product" value="2">Product-Name 3</option>
        <option name="product" value="3">Product-Name 4</option>
      </select>
    </td>
    <td>
      Price<input type="text" id="productPrice">
    </td>
  </tr>
</table>