如何在HTML选择框中为每个选项添加删除/移除按钮？

Question

我需要创建或使用一个库来创建自定义HTML <select>，以便可以在HTML <select> 中删除每个条目。类似于这样：

我需要创建或使用一个库来创建自定义HTML <select>，以便可以在HTML <select>中删除每个条目。类似于这样：

<select>
    <option value="volvo">Volvo</option> <button>delete</button>
    <option value="saab">Saab</option> <button>delete</button>
    <option value="mercedes">Mercedes</option> <button>delete</button>
    <option value="audi">Audi</option> <button>delete</button>
</select>

我已经搜索了如何做这件事以及是否存在任何库来完成此任务，但是我没有找到任何东西。在iOS中存在这个。我需要类似于此的东西，但针对HTML。

更新：类似于这个http://jsfiddle.net/b22ww/2/

- epool

---

我认为你需要的是类似于列表视图的东西，而不是选择框。 - BeNdErR

Answer 1

请使用以下内容：

<ul>
    <li><input type="radio" name="list" value="volvo">Volvo <button>delete</button></li>
    <li><input type="radio" name="list" value="saab">Saab <button>delete</button></li>
    <li><input type="radio" name="list" value="mercedes">Mercedes <button>delete</button></li>
    <li><input type="radio" name="list" value="mercedes">Mercedes <button>delete</button></li>
</ul>

然后将事件监听器添加到每个按钮，以从列表中删除父<li>元素（在jsfiddle.net的演示中）。

- Bergi

---

通过一些繁重的jQuery工作，您可以重构它，使其成为一个因素下拉选择。可能已经有一个jQuery UI插件可以实现这个功能。 - TravisO

谢谢，这个例子对于使用非常有帮助。另外一个例子在这里：http://jsfiddle.net/Tpf7E/22/ - epool

Answer 2

您想要实现的内容，使用 select 是不可能做到的。您需要创建类似于这样的 listview：

HTML

<ul>
    <li>item one <div class='deleteMe'>X</div></li>
    <li>item two <div class='deleteMe'>X</div></li>
    <li>item three <div class='deleteMe'>X</div></li>
    ....
</ul>

绑定一个点击事件处理程序。 JS

$(".deleteMe").on("click", function(){
   $(this).closest("li").remove(); 
});

看这个例子

FIDDLE http://jsfiddle.net/zZ3mc/

- BeNdErR

Answer 3

如果您愿意使用jQuery插件，chosen可以让您自定义选择元素。在您的情况下，请查看名为“Selected and Disabled Support”的部分。

- Christophe

Answer 4

我已经做了类似这样的事情...

$(document).ready(function() {
  $(".deleteMe").on("click", function() {
    if (confirm('Are you sure to delete?')) {
      $(this).closest("li").remove();
    } else {
      return false
    }
    return false;
  });
  $('li').click(function(e) {
    alert($(this).text());
    $('#selected').html('<img class="trigger" src = "https://istack.dev59.com/LFSrX.webp">' + $(this).text().trim().slice(0, -1));
    $('.dropdown-container').hide();
  });
  $(window).click(function() {
    $(".dropdown").css("border", "1px solid #444");
    $('.dropdown-container').hide();
 });
  $("#selected").on("click", function(e) {
    $(".dropdown").css("border", "1px solid orange");
    $('.dropdown-container').show();
    return false;
  });
});

  li {
    list-style: none;
    background: white;
    margin: 2px;
    padding: 5px;
  }

  .deleteMe {
    float: right;
    color: red;
  }

  .dropdown-container {
    display: block;
    position: absolute;
    border: 2px solid gray;
    padding: 5px;
    background: white;
    width: 290px;
    height: 200px;
    overflow-y: scroll;
  }

  li:hover {
    background-color: #ead6b7;
  }

  .dropdown {
    position: relative;
    border: 1px solid #444;
    border-radius: 3px;
    width: 300px;
    height:30px;
    background-color: #CCC;
    padding-top: 10px;
    padding-left: 3px;
  }
  .dropdown .trigger {
    padding-top: 10px;
    position: absolute;
    right: 0;
    top: 1px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selected" class="dropdown">
  <img class="trigger" src="https://istack.dev59.com/LFSrX.webp"> Select Something!
</div>
<div class="dropdown-container" style="display:none">
  <li>item one selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item two selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item three selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item four selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item five selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item six selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item seven selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item eight selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item nine selected
    <div class='deleteMe'>X</div>
  </li>
  <li>item ten selected
    <div class='deleteMe'>X</div>
  </li>
</div>

我希望这能帮助到某个人！

- BharathRao

Answer 5

你不能在选择框内放置按钮。一个替代方案是将其移动到选择框外，例如 this demo。

HTML：

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button>Delete current choice</button>

示例脚本：

var button=document.getElementsByTagName("button")[0],
    select=document.getElementsByTagName("select")[0];
button.onclick=function(){
    select.removeChild(select.options[select.selectedIndex]);
};

- Christophe

Answer 6

这不是有效的HTML。你不能这样做。

你可以使用模拟选择器（一堆行为类似于选择器但不是选择器的HTML/JS代码）来实现这个功能。

- Diodeus - James MacFarlane

---

然后我会补充说，如果他打算将其传递给表单，他需要对这些元素进行序列化或采取其他操作，以便包含在发送回服务器的数据包中。 - ILikeTacos