Question

我需要创建或使用库来创建自定义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中存在this。我需要类似的东西，但对于HTML。

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

的内容

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>。{/ p>

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/

Answer 3

如果您愿意使用jQuery插件，chosen允许您自定义选择元素。在您的情况下，请查看“已选择和已禁用的支持”部分。

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://i.stack.imgur.com/LFSrX.png">' + $(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://i.stack.imgur.com/LFSrX.png"> 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>

我希望这会有所帮助！

Answer 5

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

您可以使用SIMULATED选项（一组HTML / JS，其行为类似于select，但不是一个）来执行此操作。

Answer 6

您无法在选择中使用该按钮。另一种选择是将其移出选择范围，如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]);
};

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

6 个答案: