11

我需要创建或使用库来创建自定义 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/

4

6 回答 6

8

用这个：

<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 上的演示）。

于 2013-09-18T19:44:49.843 回答
3

您需要实现的目标，使用select. 您需要创建类似 a 的内容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(); 
});

看这个例子

小提琴 http://jsfiddle.net/zZ3mc/

于 2013-09-18T19:47:29.177 回答
2

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

于 2013-09-18T20:38:18.733 回答
1

我做过这样的事情......

$(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>

我希望这会对某人有所帮助！

于 2018-07-09T10:40:08.717 回答
0

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

您可以使用模拟选择来执行此操作（一堆 HTML/JS，其行为类似于选择，但不是一个）

于 2013-09-18T19:42:03.253 回答
0

您不能在选择中拥有按钮。另一种选择是将它移到选择之外，就像在这个演示中一样。

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]);
};
于 2013-09-18T19:56:05.997 回答