как сделать автоматический ввод в текстовое поле html

Question

Когда я выбираю один из вариантов в datalist, я хочу, чтобы текстовое поле было заполнено автоматически. У меня есть этот код, но он не работает. Извините, мой английский не очень хороший

<tr> 
    <td width="15%"><div class="tabtxt">Pilih Pembayaran</div></td> 
    <td width="2%"><div class="tabtxt">:</div></td> 
    <td width="83%"> 
     <input list="bayar" name="bayar" style="width: 203px"> 
     <datalist id="bayar"> 
      <option value="Visual Basic Islam"> 
      <option value="Baitul Arqam"> 
      <option value="Shortcourse"> 
      <option value="Sertifikasi"> 
      <option value="Seminar SID"> 
      <option value="TOEFL & Bahasa Inggris"> 
     </datalist> 
    </td> 
</tr> 
<tr> 
    <td width="15%"><div class="tabtxt">Kode Pembayaran</div></td> 
    <td width="2%"><div class="tabtxt">:</div></td> 
    <td width="83%"> 
     <input name="id_bayar" style="width: 200px" type="text" class="tfield" id="id_bayar"> 
     <script type="text/javascript"> 
      $("#bayar").change(function(){ 
       var in = $("#bayar").val(); 
       $("id_bayar").val("hallo"); 
      }); 
     </script> 
    </td> 
</tr> 

Как это решить? Спасибо за ответы

Answer 1

Во-первых, добавить, например, идентификатор inbayar, к входному элементу:

<input id="inbayar" list="bayar" name="bayar" style="width: 203px"> 

Они, вы должны связать событие этого html5 элемента так:

$(document).ready(function() { 
    $("#inbayar").bind('input', function() { 
     $("#id_bayar").val(this.value); 
     alert("Working!"); 
    }); 
}); 

Рабочее решение здесь http://jsfiddle.net/csdtesting/gk3r8da9/

• Пересмотр решения спросил vol.1 http://jsfiddle.net/csdtesting/gk3r8da9/1/

Answer 2

<table> 
<tr> 
      <td width="15%"><div class="tabtxt">Pilih Pembayaran</div></td> 
      <td width="2%"><div class="tabtxt">:</div></td> 
      <td width="83%"> 

      <select id="bayar"> 
      <option value="Visual Basic Islam">Visual Basic Islam</option> 
      <option value="Baitul Arqam">Baitul Arqam</option> 
      <option value="Shortcourse">Shortcourse</option> 
      <option value="Sertifikasi">Sertifikasi</option> 
      <option value="Seminar SID">Seminar SID</option> 
      <option value="TOEFL & Bahasa Inggris">TOEFL & Bahasa Inggris</option> 
      </select> 
      </td> 
    </tr> 
     <tr> 
      <td width="15%"><div class="tabtxt">Kode Pembayaran</div></td> 
      <td width="2%"><div class="tabtxt">:</div></td> 
      <td width="83%"> 
       <input name="alert();" style="width: 200px" type="text" class="tfield" id="id_bayar"> 

      </td> 
     </tr> 
     </table> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#bayar").on('change',function(){ 

      var a = $("#bayar").val(); 

      $("#id_bayar").val(a); 
      }); 
    }); 

</script>