how to handle same class dropdown made by ul & li

Question

I have two drop-downs here with same class name, these are made by lists and containing an input field each, when you click on input, dropdown opens as normal select dropdown but when I select any option of that dropdown, the value of other dropdown also getting change. How to stop it ? Please help me ....

 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

您为下拉菜单使用了相同的类，因此无论您编写的是哪种JavaScript都可用于两个下拉菜单，请更改您的类名称。

Answer 2

You must find .inp in your parent div .
Use closest to target your div parent and find the class name .inp in it

Change your code

$(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);
  });
});

to

 $(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/