0

連絡先のリストがあり、ドロップダウンを使用して入力に phoneNumbers を表示したいと思います。

<div id="retrievedContactsDiv" data-bind="foreach: Model.userContacts.contacts()">

 <!-- ko if: ($data.phoneNumbers().length >= 1) -->
            <div class="control-group span3 offset3 ">

    <div class="input-append btn-group">

        <input  id="appendedInputButton"  type="text" data-bind="value:$data.phoneNumbers()[0].phoneNumber()">
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <!-- ko foreach: $data.phoneNumbers() -->
            <li><span  data-bind="text: $data.phoneNumber()"></span> </li>
             <!-- /ko -->

        </ul>
    </div>

        </div>
        <!-- /ko -->
 </div>

JS

$('.dropdown-menu li span').click(function(){
    var elementVal=$(this).text();
        $('#appendedInputButton').val('');
    $('#appendedInputButton').val(elementVal);
    });

私の問題は、同じ ID を持つことができないことです。クラスを使用すると、連絡先リストのすべての phoneNumbers が変更されます。ユーザーがドロップダウンを使用する場合、正しい値を表示するにはどうすればよいですか? http://imageup.fr/uploads/1377867794.jpeg

4

1 に答える 1

0

jQuery スマート セレクターを使用して、最も近い共通の親を見つけ、その中のフィールドを見つけます。

$('.dropdown-menu li span').click(function(){
  var elementVal = $(this).text();

  $(this).closest('.input-append').find('#appendedInputButton').val(elementVal);
});

実際、これも (HTML に関して) 間違っています。ID が重複しているからです。id の代わりにクラスを使用して同じことを行うことをお勧めします。上記の提案された JS とまったく同じように機能します。

于 2013-08-30T13:57:54.180 に答える