How to add buttons next to select tag

Question

I need to add close button to clear select element in select tag, as well as I need to make the dropdown like a button as below image

Here is my HTML code:

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

How can I do this? Or is it not possible to do?

you need dropdown as a button or maybe just custom icon instead of arrow? As far as I know there are no cross-browser solution to expand select with JS — Oleh Rybalchenko, Aug 30 '17 at 12:41

score 3 · Answer 1 · edited Aug 30 '17 at 13:26

You have to style the select tag the way it looks on your image. The cancel button must be a seperat HTML Tag, which than have to be styled on its own and positioned next to the select.

Your html would look something like this:

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

Oleh Rybalchenko · Answer 2 · 2017-08-30T12:35:22.553

2

You can do it with ease using bootstrap and JQuery. However the logic remains the same if you choose something else. Check the snippet below:

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

edited Aug 30 '17 at 12:35

answered Aug 30 '17 at 12:30

Oleh Rybalchenko

6,998
3
22
36

1

I need to a the `button` to `select` tag not for `input` tag – Udara Herath Aug 30 '17 at 12:32
sorry, didn't notice that. Update my answer – Oleh Rybalchenko Aug 30 '17 at 12:39
Is it possible to change the select (arrow) button ? – Udara Herath Aug 30 '17 at 12:59
yes, it's possible with various css and js tricks, for example: https://stackoverflow.com/a/37834481/7732200 . I can apply it to the snippet above if you want, but not sure that it remains reusable and illustrative - solutions I know are really tricky – Oleh Rybalchenko Aug 30 '17 at 13:34

score 2 · Answer 3 · answered Aug 30 '17 at 12:36

Try something like following:

$("#clear_addon").on("click", function(){
  $("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"  aria-describedby="clear-addon">
  <option></option>
  <option>option1</option>
  <option>option2</option>
  </select>
  <span class="input-group-addon" id="clear_addon">&#10006;</span>
</div>

score 1 · Answer 4 · answered Aug 30 '17 at 13:03

some ugly but it might give a idea look

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

How to add buttons next to select tag

4 Answers4