選擇下拉列表時如何在其他文本字段中設置值？

Question

我遇到了一些問題，當選擇下拉菜單時，我想在其他字段中設置值。

我嘗試了這個html：

<select id="nik" name="nik" class="select-select2" style="width: 100%;" onchange="setData('<?php echo $data['nama_jabatan']; ?>','<?php echo $data['nilai_tunjangan_p']; ?>','<?php echo $data['nilai_tunjangan_j']; ?>')">

和這個js：

 function setData(nama_jabatan,nilai_tunjangan_p,nilai_tunjangan_j)
 {
    $('#nama_jabatan').val(nama_jabatan);
    $('#nilai_tunjangan_p').val(nilai_tunjangan_p);
    $('#nilai_tunjangan_j').val(nilai_tunjangan_j);
}

但是文本框val沒有更新。

Answer 1

實現此目的的一種方法是將信息添加到<option>而不是<select>標記上。 您可以使用jQuery data- 。

喜歡：

<option value="volvo" data-nama_jabatan="nama_jabatan 1" data-nilai_tunjangan_p="nilai_tunjangan_p 1" data-nilai_tunjangan_j="nilai_tunjangan_j 1">Volvo</option>

這是一個片段

 $(function(){ //Add event listener to element with id nik $("#nik").change(function(){ //Get the selected option var opt = $(this).find("option:selected") //Get the data information from the selected option var nama_jabatan = $(opt).data("nama_jabatan"); var nilai_tunjangan_p = $(opt).data("nilai_tunjangan_p"); var nilai_tunjangan_j = $(opt).data("nilai_tunjangan_j"); //Update the textboxes $('#nama_jabatan').val( nama_jabatan ); $('#nilai_tunjangan_p').val( nilai_tunjangan_p ); $('#nilai_tunjangan_j').val( nilai_tunjangan_j ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="nik" name="nik" class="select-select2" style="width: 100%;"> <option value="volvo" data-nama_jabatan="" data-nilai_tunjangan_p="" data-nilai_tunjangan_j=""></option> <option value="volvo" data-nama_jabatan="nama_jabatan 1" data-nilai_tunjangan_p="nilai_tunjangan_p 1" data-nilai_tunjangan_j="nilai_tunjangan_j 1">Volvo</option> <option value="saab" data-nama_jabatan="nama_jabatan 2" data-nilai_tunjangan_p="nilai_tunjangan_p 2" data-nilai_tunjangan_j="nilai_tunjangan_j 2">Saab</option> <option value="mercedes" data-nama_jabatan="nama_jabatan 3" data-nilai_tunjangan_p="nilai_tunjangan_p 3" data-nilai_tunjangan_j="nilai_tunjangan_j 3">Mercedes</option> <option value="audi" data-nama_jabatan="nama_jabatan 4" data-nilai_tunjangan_p="nilai_tunjangan_p 4" data-nilai_tunjangan_j="nilai_tunjangan_j 4">Audi</option> </select> <br /> <br /><input type="text" id="nama_jabatan"> <br /><input type="text" id="nilai_tunjangan_p"> <br /><input type="text" id="nilai_tunjangan_j">