如何處理由ul＆li生成的同類下拉菜單

Question

我有兩個下拉菜單，這裏有相同的類名，這些下拉菜單由列表組成，每個菜單都包含一個輸入字段，當您單擊輸入時，下拉菜單以正常選擇下拉菜單打開但是當我選擇該下拉列表中的任何選項時，其他下拉列表的值也會發生變化。如何阻止它？請幫我....

function DropDown(el) { 
 
    this.dd = el; 
 
    this.initEvents(); 
 
} 
 
DropDown.prototype = { 
 
    initEvents: function() { 
 
    var obj = this; 
 
    obj.dd.on('click', function(event) { 
 
     $(this).toggleClass('active'); 
 
     event.stopPropagation(); 
 
    }); 
 
    } 
 
} 
 

 
$(function() { 
 
    var dd = new DropDown($('.dd')); 
 
    $(document).click(function() { 
 
    // all dropdowns 
 
    $('.wrapper-dropdown-5').removeClass('active'); 
 
    }); 
 
}); 
 

 
$("li.item").click(function() { 
 
    var li_val = $(this).text(); 
 
    console.log(li_val); 
 

 
    //console.log($($($(this).parent()).parent()).children()); 
 
    //$($($($(this).parent()).parent()).children()[0]).val(li_val); 
 
    //$(".inP").val(li_val); 
 
}); 
 

 
$(".add").click(function() { 
 
    var inPPuT = $(".inP").val(); 
 
    $(".live-search-list").prepend("<li class='item'><a href='#'><i class='icon-user'></i>" + inPPuT + "</a></li>"); 
 
    $('.wrapper-dropdown-5').removeClass('active'); 
 
}); 
 

 
$(document).ready(function() { 
 
    var wrapper = $('.live-search-list'); 
 
    $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked 
 
    e.preventDefault(); 
 
    var li_vl = $(this).text(); 
 
    $(".inP ").val(li_vl); 
 
    }); 
 
}); 
 

 
$('.live-search-list li.item').each(function() { 
 
    $(this).attr('data-search-term', $(this).text().toLowerCase()); 
 
}); 
 

 
$('.live-search-box').on('keyup', function() { 
 
    var searchTerm = $(this).val().toLowerCase(); 
 

 
    $('.live-search-list li.item').each(function() { 
 
    if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { 
 
     $(this).show(); 
 
    } else { 
 
     $(this).hide(); 
 
    } 
 
    }); 
 
});

*, 
 
*:after, 
 
*:before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
::selection { 
 
    background: transparent; 
 
} 
 
::-moz-selection { 
 
    background: transparent; 
 
} 
 
.wrapper-demo { 
 
    margin: 60px 0 0 0; 
 
    *zoom: 1; 
 
    font-weight: 400; 
 
} 
 
.wrapper-demo:after { 
 
    clear: both; 
 
    content: ""; 
 
    display: table; 
 
} 
 
.wrapper-dropdown-5 { 
 
    /* Size & position */ 
 
    position: relative; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    padding: 12px 15px; 
 
    /* Styles */ 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
 
    cursor: pointer; 
 
    outline: none; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 
.wrapper-dropdown-5:after { 
 
    /* Little arrow */ 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 15px; 
 
    margin-top: -3px; 
 
    border-width: 6px 6px 0 6px; 
 
    border-style: solid; 
 
    border-color: #4cbeff transparent; 
 
} 
 
.wrapper-dropdown-5 .dropdown { 
 
    /* Size & position */ 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    /* Styles */ 
 
    background: #fff; 
 
    border-radius: 0 0 5px 5px; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: none; 
 
    border-bottom: none; 
 
    list-style: none; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    /* Hiding */ 
 
    max-height: 0; 
 
    overflow: hidden; 
 
} 
 
.wrapper-dropdown-5 .dropdown li { 
 
    padding: 0 10px; 
 
} 
 
.wrapper-dropdown-5 .dropdown li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #333; 
 
    padding: 10px 0; 
 
    transition: all 0.3s ease-out; 
 
    border-bottom: 1px solid #e6e8ea; 
 
} 
 
.wrapper-dropdown-5 .dropdown li:last-of-type a { 
 
    border: none; 
 
} 
 
.wrapper-dropdown-5 .dropdown li i { 
 
    margin-right: 5px; 
 
    color: inherit; 
 
    vertical-align: middle; 
 
} 
 
/* Hover state */ 
 

 
.wrapper-dropdown-5 .dropdown li:hover a { 
 
    color: #57a9d9; 
 
} 
 
/* Active state */ 
 

 
.wrapper-dropdown-5.active { 
 
    border-radius: 5px 5px 0 0; 
 
    background: #4cbeff; 
 
    box-shadow: none; 
 
    border-bottom: none; 
 
    color: white; 
 
} 
 
.wrapper-dropdown-5.active:after { 
 
    border-color: #82d1ff transparent; 
 
} 
 
.wrapper-dropdown-5.active .dropdown { 
 
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
 
    max-height: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper-dropdown-5 dd" tabindex="1"> 
 
    <input class="inP live-search-box" type="text" name="items[]"> 
 
    <ul class="dropdown live-search-list"> 
 
    <li class="item"><a href="#"><i class="icon-user"></i>Profile</a></li> 
 
    <li class="item"><a href="#"><i class="icon-cog"></i>Settings</a></li> 
 
    <li class="item"><a href="#"><i class="icon-remove"></i>Log out</a></li> 
 
    <li> 
 
     <a href="#"> 
 
     <button class="add_item" type="button">Add Item</button> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div style="margin-top: 100px;" class="wrapper-dropdown-5 dd" tabindex="1"> 
 
    <input class="inP live-search-box" type="text" name="items[]"> 
 
    <ul class="dropdown live-search-list"> 
 
    <li class="item"><a href="#"><i class="icon-user"></i>Profile</a></li> 
 
    <li class="item"><a href="#"><i class="icon-cog"></i>Settings</a></li> 
 
    <li class="item"><a href="#"><i class="icon-remove"></i>Log out</a></li> 
 
    <li> 
 
     <a href="#"> 
 
     <button class="add_item" type="button">Add Item</button> 
 
     </li> 
 
    </ul> 
 
</div>

Answer 1

您必須在您的父母div中找到.inp。
使用closest來定位您div parent，並在其中

更改找到類名.inp代碼

$(document).ready(function() { 
    var wrapper = $('.live-search-list'); 
    $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked 
    e.preventDefault(); 
    var li_vl = $(this).text(); 
    $(".inP ").val(li_vl); 
    }); 
}); 

到

$(document).ready(function() { 
    var wrapper = $('.live-search-list'); 
    $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked 
    e.preventDefault(); 
    var li_vl = $(this).text(); 
    $(this).closest("div").find(".inP ").val(li_vl); // find parent 1st 
    }); 
}); 

的jsfiddle：https://jsfiddle.net/synz/13tLhfhv/

Answer 2

您正在使用相同的類下拉所以不管你的JavaScript編寫工作同時爲dropdown.Please改變你的類名。