如何处理由ul＆amp; amp;里

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

你在下拉列表中使用相同的类，所以你写的任何javascript都适用于下拉列表。请更改你的类名。

Answer 2

您必须在父.inp中找到div 使用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/