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

首先将一个id（例如inbayar）添加到input元素：

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

修订解决方案问卷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>

如何在textfield html中进行自动输入

2 个答案: