Question

我正在尝试为input元素创建自定义下拉列表。我想在哪里启用为输入选择一个预定义的值，也可以让用户输入自己的选择。正如您在示例中看到的那样，它可以正常工作，但如果我有多个带有下拉列表的输入，则它不起作用。

所以问题是如何实现？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav menu">
        <li class="item-101 default deeper parent">
               <a href="/">Home</a>
               <ul class="nav-child unstyled small clicked">
                  <li class="item-124">
                      <a href="/home/maandmail">Maandmail</a>
                  </li>
              </ul>
         </li>
         <li class="item-102 default deeper parent">
               <a href="/">Contact</a>
               <ul class="nav-child unstyled small clicked">
                  <li class="item-125">
                      <a href="/home/contact-page">Contact pagina</a>
                  </li>
              </ul>
         </li>
    </ul>

$(document).ready(function() {
// dropdown for inputs
var getDataAttr;
$(document).on('focus click', '.input', function(event) {
    $(event.target).next('.dd_items').show();
});
$(document).on('click', '.choose_val', function() {
    $(".input").val($(this).text());
    $('#new-types').fadeOut();
});
$(document).on('focusout', '.input', function () {
    $(event.target).next('.dd_items').hide();
});
});

.wrap {
  position: relative;
  display: inline-block;
  width: 250px;
}

.input {
  width: 220px;
  height: 30px;
}

.dd_items {
  background-color: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 34px;
  min-width: 220px;
}
.dd_items__item {
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 16px;
}
.dd_items__item:last-child {
  border-bottom: 0;
}
.dd_items__item:hover {
  background-color: #ddd;
  color: #fff;
}

Answer 1

在这种情况下，您宁愿使用类，而不是使用id。

通过在DOM树中上下移动，您可以显示和隐藏所需的元素......

＆＃13;

$(document).ready(function() {
  // dropdown for inputs
  var getDataAttr;
  $(document).on('focus click', '.input', function() {
    $(this).next('.new-types').show();
  });
  $(document).on('click', '.choose_val', function() {
    $(this).parent().prev(".input").val($(this).text());
    $(this).parent().fadeOut();
  });
  $(document).on('focusout', '.input', function() {
    $('.new-types').fadeOut();
  });
});

＆＃13;

.wrap {
  position: relative;
  display: inline-block;
  width: 250px;
}

.input {
  width: 220px;
  height: 30px;
}

.dd_items {
  background-color: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 34px;
  min-width: 220px;
}

.dd_items__item {
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 16px;
}

.dd_items__item:last-child {
  border-bottom: 0;
}

.dd_items__item:hover {
  background-color: #ddd;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap">
  <input type="text" id="first" class="input" data-dropdown="#add_new_type">
  <ul style="display: none" class="dd_items new-types">
    <li data-id="1" class="choose_val dd_items__item">First First value</li>
    <li data-id="2" class="choose_val dd_items__item">First Second value</li>
  </ul>
</div>
<div class="wrap">
  <input type="text" id="second" class="input" data-dropdown="#add_new_type">
  <ul style="display: none" class="dd_items new-types">
    <li data-id="1" class="choose_val dd_items__item">Second First value</li>
    <li data-id="2" class="choose_val dd_items__item">Second Second value</li>
    <li data-id="2" class="choose_val dd_items__item">Second Third value</li>
    <li data-id="2" class="choose_val dd_items__item">Second Fourth value</li>
  </ul>
</div>
<div class="wrap">
  <input type="text" id="third" class="input" data-dropdown="#add_new_type">
  <ul style="display: none" class="dd_items new-types">
    <li data-id="1" class="choose_val dd_items__item">Third First value</li>
    <li data-id="2" class="choose_val dd_items__item">Third Second value</li>
  </ul>
</div>

＆＃13;

Answer 2

所以@linkinTED给了你很好的评论和答案，基于这里是使用数据的解决方案 - *。

$(document).ready(function() {
  // dropdown for inputs
  var dataName = 'dropdown'; 
  var dataAttr;
  
  $(document).on('focus click', '.input', function() {
    dataAttr = $(this).data(dataName);
    $(document).find(dataAttr).show();;
  });
  $(document).on('click', '.choose_val', function() {
    $('.input[data-dropdown="'+dataAttr+'"]').val($(this).text());
  });
  $(document).on('focusout', '.input', function() {
    $('.new-types').fadeOut();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul style="display: none" class="dd_items new-types" id="add_date">
    <li data-id="1" class="choose_val dd_items__item">Date First value</li>
    <li data-id="2" class="choose_val dd_items__item">Date Second value</li>
    <li data-id="2" class="choose_val dd_items__item">Date Third value</li>
    <li data-id="2" class="choose_val dd_items__item">Date Fourth value</li>
  </ul>
<div class="wrap">
  <input type="text" id="second" class="input" data-dropdown="#add_date">
  
</div>
<div class="wrap">
  <input type="text" id="third" class="input" data-dropdown="#add_new_type">
  
</div>

  <ul style="display: none" class="dd_items new-types" id="add_new_type">
    <li data-id="1" class="choose_val dd_items__item">Third First value</li>
    <li data-id="2" class="choose_val dd_items__item">Third Second value</li>
  </ul>

Answer 3

这是因为您的目标是通用元素，而不是特定元素。

在第二个事件监听器中，您定位'.input'，但如果您复制了此内容，则DOM中会有几个'.input'。

您应该使用类似$(this).closest('.input')的内容。

从自定义列表中获取相应的值

3 个答案: