根据选择选项更改输入值

时间:2018-05-04 08:41:45

标签: javascript php jquery html

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

<?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" />

我没有任何线索如何获取所选选项元素的数组索引并从价格数组中选择索引。

1 个答案:

答案 0 :(得分:0)

这样的东西?假设我已正确理解了这个问题

document.querySelector("#art").onchange=function() {
  var val = this.options[this.selectedIndex].value;
  document.querySelector("#price").value=val?val.split("|")[1]:"";
}
document.querySelector("#art").onchange(); // 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.options[this.selectedIndex].value;
  $("#price").val(val?val.split("|")[1]:"");
}).change(); // initialise