Comment définir la valeur dans l'autre champ de texte lorsque la liste déroulante est sélectionnée ?

Rizal Fauza Syahputra

J'ai un problème, lorsque la liste déroulante est sélectionnée, je veux définir la valeur dans l'autre champ.

J'ai essayé ce 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']; ?>')">

et ce 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);
}

Mais la zone de texte val n'est pas mise à jour.

Eddie

Une façon d'y parvenir est d'ajouter les informations sur le <option>et non sur l' <select>étiquette. Vous pouvez utiliser jQuery data-.

Comme:

<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>

Voici un extrait"

$(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">

Articles connexes