根据选择选项更改输入值答案

【问题标题】：change input value depending on select option根据选择选项更改输入值
【发布时间】：2018-05-04 08:41:44
【问题描述】：

我有两个数组，它们的长度相同。一个数组用于文章，另一个数组用于价格。第一个数组将指向一个选择选项元素。通过选择一篇文章，另一个数组中的价格应显示在输入字段中。因此，如果我从选项中选择第二篇文章，则应将价格数组中的第二个价格加载到输入字段值中。

<?php
 foreach($article as $art){
    $arr_artnr[]     = $art["artnr"];
    $arr_artname[]   = $art["artname"];
    $arr_price[]     = $art["price"];
  }
?>

<select name="art" id="art">
   <?php
     foreach($article as $art){
   ?>
   <option value="<?php echo $art["artnr"];?>"><?php echo $art["artname"] ?></option>
   <?php
     }
   ?>
</select>

<input type="number" name="price" id="price" value="" disabled="disabled" />

我不知道如何获取所选选项元素的数组索引并从价格数组中选择索引。

【问题讨论】：

由于数组保存在 PHP 变量中，您需要使用 AJAX 将所选值从 select 发送回 PHP，以便在 input 中显示。要么这样，要么你可以 echo 将数组放入一个 JS 变量并在客户端读取它。
@RoryMcCrossan 我认为他在同一页面上有两个数组。他只需要从第一个选择选项数组中获取索引，然后基于该索引从第二个数组中获取值并将其粘贴到输入框。我希望只需要一点 jQuery。
@AlivetoDie 他们在同一个页面上，但正如我提到的，他们在 PHP 中，所以 JS 无法访问它们。如果传递的数据没有安全问题，我在上一条评论中概述的第二种方法应该可以正常工作

标签： javascript php jquery html

【解决方案1】：

这里有两个版本

window.addEventListener('DOMContentLoaded', function() {
  const art = document.getElementById("art");
  const setPrice = function() {
    var val = art.value; 
    document.getElementById("price").value=val?val.split("|")[1]:"";
  };
  art.addEventListener("change", setPrice);
  setPrice(); // initialise
})

<select name="art" id="art">
<option value="">Please select</option>

<?php
 foreach($article as $art){
?>
   <option value="<?php echo $art["artnr"]."|". $art["price"];?>|"><?php echo $art["artname"] ?></option>
<?php }  ?>
</select>

<input type="number" name="price" id="price" value="" readonly />

jQuery 版本

$("#art").on("change",function() {
  var val = this.value;
  $("#price").val(val?val.split("|")[1]:"");
}).change(); // initialise

【讨论】：