html - 下拉多个选项问题

Question

我有一个联系人列表，我想在下拉列表中显示电话号码。

<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，如果我使用类，我的联系人列表的所有电话号码都将被修改，如果用户使用下拉列表，我该如何显示正确的值？ http://imageup.fr/uploads/1377867794.jpeg

Answer 1

使用 jQuery 智能选择器查找最近的公共父项，然后找到其中的字段。

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

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

实际上，这也是错误的（就 HTML 而言），因为您遇到了重复的 ID。我宁愿建议你对一个类而不是 id 做同样的事情，它与上面建议的 JS 完全相同。