如何在select标签旁边添加按钮

Question

我需要添加关闭button以清除select标记中的选择元素，同时我需要将dropdown设为button，如下图所示

这是我的HTML代码：

<div class="form-group">
  <label for="sel1">Select Asset:</label>
  <select class="form-control" id="assetCategory">
      <option value="" selected disabled>Select Asset</option>
      <option value="1">Asset 1</option>
      <option value="2">Asset 2</option>
      <option value="3">Asset 3</option>
      <option value="4">Asset 4</option>
  </select>
</div> 

我该怎么做？或者是不可能做到的？

Answer 1

您必须按照它在图像上的显示方式设置select标记的样式。 取消按钮必须是一个单独的HTML标记，它必须单独设置样式并位于选择旁边。

你的HTML看起来像这样：

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

Answer 2

您可以使用bootstrap和JQuery轻松完成。但是，如果您选择其他内容，逻辑仍然相同。请查看以下代码段：

$("#clear_addon").on("click", function(){
  $("#target_select").val("");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <select class="form-control" id="target_select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <span class="input-group-addon" id="clear_addon">Clear</span>
</div>

Answer 3

尝试以下内容：

$ date
Wed Aug 30 14:34:14 DFT 2017
$ perl -MPOSIX -e '@t=localtime time; $t[3] -= 60; print strftime( "%Y/%m/%d", @t), "\n";'
2017/07/01

$("#clear_addon").on("click", function(){
  $("select").val("");
})

Answer 4

有些丑陋，但它可能会给人一种想法

$("button").click(function(){
 $("#a").val('');
});

select {
  width: 200px;
  border: 1px solid #ccc;
}

button {
  position:fixed;
  left:158px;
  padding: 0px;
  width: 50px;
  background-color:white;
  border: 1px solid #ccc;
}
div select, button{
  height:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="a">
    <option value="a">a</option>
    <option value="c">b</option>
    <option value="c">c</option>
  </select>
  <button>remove</button>
</div>