如何更改禁用输入占位符的每个选定的下拉值

Question

我正在制作一个表单，该表单具有一个从数据库存储的字符串组成的选定下拉列表（我通过雄辩的模型通过雄辩的模型在数据库中进行了@foreach循环以分配下拉列表），在下拉列表的下方3禁用作为数据库中与下拉列表值相关的列的输入。我希望一旦我从下拉列表中选择一个值，disable input的占位符就会自动将其值更改为与数据库中带有下拉值记录的记录相同的记录。我该怎么办？我应该使用什么JS脚本？

blade.php

<form class="form-horizontal">
  <fieldset>
    <div class="control-group">
    <label class="control-label" for="selectError2">Plat Nomor</label>
    <div class="controls">
      <select data-placeholder="Pilih Nomor Polisi" id="selectError2" data-rel="chosen">
        <option value=""></option>
        @foreach ($park as $p)
          <option value="{{$p->id}}">{{$p->nopol}}</option>
         @endforeach
      </select>
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="disabledInput">Jenis Kendaraan</label>
    <div class="controls">
      <input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->jenis}}" disabled="">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="disabledInput">Kategori Kendaraan</label>
    <div class="controls">
      <input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->kategori}}" disabled="">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="disabledInput">Waktu Masuk</label>
    <div class="controls">
      <input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->created_at}}" disabled="">
    </div>
    </div>

Answer 1

请参考我的示例代码：

http://jsfiddle.net/18pa7m0q/11/

function change(select)
{
   var value=select.options[select.selectedIndex].value;
   $(".input-large").attr("placeholder",value);
}

Answer 2

终于我从一个朋友那里得到了答案。

首先，在与下拉记录对应的每个输入上添加属性id="your_id"。 之后，添加此行<script>

`

// Transform PHP variable into json, so it can be cached into js variable
// Adjust the param with @json($your_table_name)
const park = @json($park);

function change(select) {

// Get the id (which is in the value) of the selected option
let id = select.options[select.selectedIndex].value

// Find the data in the cached json
let parkData = park.find(function (p) {
  // Find it by id
  return p.id == id
})

// For each fields to be shown in the page...
// Each member of array are the same id from the <input> tag
// In this case i want three columns to be shown in the page..
for (let field of ["jenis", "kategori", "created_at"]) {
  // Put the data to the corresponding element
  document.getElementById(field).value = parkData[field]
}

}

`

Voila！每当我选择下拉菜单的值时，它都会更改禁用输入的值。 它只需要没有jQuery或任何其他JS框架的Plain JS。如此简单：D