Question

我有一个联系人列表，我想在输入中显示带有下拉列表的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

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完全相同。

下拉多选项问题

1 个答案: