Question

我有一个包含多个输入选择的下拉列表。用户可以选择自己喜欢的任何东西，每次选择时，他们的选择都会显示在该字段中。

问题： 1.我尝试通过var inputName = $('input').attr('name');获取输入的值名称，但是它确实可以工作。请帮忙解决这个问题。

选择之后，如果他们改变主意并想要删除一个或多个所选内容，我该如何在要删除的产品旁边创建一个X按钮？

谢谢！

JF

$(function() {
        $('.field-store').click(function(){
            $('.dropdown-menu').slideToggle('fast');
    })
    $('.dropdown-menu input').click(function() {
            $('.txt-title').hide();
        var inputName = $('input').attr('name');
        $('.multi-selects').append('inputName ');
    })
})

HTML

<div class="field-store">
  <span class="txt-title">Pick what you like</span>
  <span class="multi-selects"></span>
</div>
<ul class="dropdown-menu">
  <li>
    <input type="checkbox" name="cheese">Cheese</input>
  </li>
  <li>
    <input type="checkbox" name="tomatoes">Tomatoes</input>
  </li>
  <li>
    <input type="checkbox" name="mozarella">Mozzarella</input>
  </li>
  <li>
    <input type="checkbox" name="mushrooms">Mushrooms</input>
  </li>
  <li>
    <input type="checkbox" name="pepperoni">Pepperoni</input>
  </li>
  <li>
    <input type="checkbox" name="onions">Onions</input>
  </li>
</ul>

CSS

.field-store {
  width: 50%;
  height: 40px;
  background: white;
  border: 1px solid black;
}
.dropdown-menu {
  display: none;
}

Answer 1

有两行引起此问题。

第一个是$('.multi-selects').append('inputName ');。您要在元素上附加一个字符串，而不是inputName的值。为此，只需删除单引号，如下所示：

$('.multi-selects').append(inputName + " ");

第二个是您的inputName定义。您正在使用input标签作为选择器，这意味着它一直在获取此标签的第一个实例。我建议将输入变量（在这种情况下为e）添加到click()事件处理程序中的函数中，如下所示：

$('.dropdown-menu input').click(function(e) {})

并将您的inputName定义更改为此：

var inputName = $(e.target).attr('name');

我还通过这些更改here编辑了您的jsfiddle。希望这会有所帮助！

Answer 2

  $('.dropdown-menu input').click(function() {
      $('.txt-title').hide();
      var inputName = $(this).attr('name');
      if($(this).prop('checked')){
         $('.multi-selects').append('<span>'+ inputName + '</span>' );
      }else{ 
        $('.multi-selects span:contains('+inputName+')').remove()
    } 
  })

jQuery追加输入名称

2 个答案: