下拉多個選項問題

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完全一樣。