0

テキストボックスを表示する次のコードがあります。

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

次のコードは、1 つを選択してテキスト ボックス内に配置できるさまざまなオプションを表示するためのものです。クリックするとリストが表示されます。

医師一覧

コードを以下に示します

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

そのリストの項目をクリック可能にして、クリックするとテキストボックスに表示されるようにしたいです。どうすればそれを達成できますか? コードにどのような変更を加える必要がありますか?

4

1 に答える 1

3

次のような 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());
   });
于 2013-11-11T11:01:12.647 に答える