单击时从列表中将文本添加到文本框的方法

Way to add the text to text box from the list on clicking

本文关键字:文本 添加 方法 列表 单击      更新时间:2023-09-26

我有以下代码显示一个文本框。

<p>
    <label>Enter the doctor id</label>
    <input type="text" autocomplete="on" name="dr_id" id="user_id" class="user_name" >
</p>

以下代码用于显示各种选项,可以从中选择一个并将其放入文本框中。单击时将显示列表

医生名单

代码如下所示

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
});
</script>
 <a href="#" class="show_hide">List of doctors</a><br />
    <div class="slidingDiv">
        Dr.Prashant Salunke - dr.salunke.<br>Dr.Kalam - dr.apj<br>Dr.Manmohan Singh - dr.economics<br> <a href="#" class="show_hide">hide</a>
    </div>

</div><br>

我希望是否使该列表中的项目可单击,这样如果单击它们,它们就会出现在文本框中。我该如何实现?我需要在代码中进行哪些更改?

用 ul 和 li 元素列出,例如:

<ul id="list">
    <li>Dr.Prashant Salunke - dr.salunke.</li>
    <li>Dr.Kalam - dr.apj</li>
    <li>Dr.Manmohan Singh - dr.economics</li>
</ul>

然后创建点击事件:

$('#list li').click(function()
   {
   $('#user_id').val($(this).text());
   });