How can I add/remove Options in a Selector?

Question

How can I add or Remove an Option in a Selector, I have a selector like this:

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

I want an Add Button and a Remove Button added to it.

The Add button can add a new Option and the Remove if I select an Option I can push remove to delete it automatically

$('select[name=things]').change(function() {
  if ($(this).val() == '') {
    var newThing = prompt('Enter a name for the new thing:');
    var newValue = $('option', this).length;
    $('<option>')
      .text(newThing)
      .attr('value', newValue)
      .insertBefore($('option[value=]', this));
    $(this).val(newValue);
  }
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
    <option value="">New Thing&hellip;</option>
</select>

This Could work for Me but I want the New Thing on a + Button and a Remove button added to it.

What do you guys think?

Carsten Løvbo Andersen · Accepted Answer · 2017-10-05T07:04:39.873

First problem is that you need to add "" to [value=] so it will be [value=""]

I've also added a remove button. (not sure if this is how you want it, but it might help you)

Demo

$('select[name=things]').change(function() {
  if ($(this).val() == '') {
    var newThing = prompt('Enter a name for the new thing:');
    var newValue = $('option', this).length;
    $('<option>')
      .text(newThing)
      .attr('value', newValue)
      .insertBefore($('option[value=""]', this));
    $(this).val(newValue);
  }
});

$(".rOption").click(function() {
  var v = $("select[name=things]").val();
  if (v != null) {
    $("select[name=things] option:selected").remove();
  }
})

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
    <option value="">New Thing&hellip;</option>
</select>

<button class="rOption">Remove option</button>

Demo2

$('.addOption').click(function() {
  var obj = $('select[name="things"]')
  var newThing = prompt('Enter a name for the new thing:');
  var newValue = $('option', obj).length;
  $('<option>')
    .text(newThing)
    .attr('value', newValue)
    .insertAfter($('option:last', obj));
  obj.find('option').last().prop('selected',true);
});

$(".rOption").click(function() {
  var v = $("select[name=things]").val();
  if (v != null) {
    $("select[name=things] option:selected").remove();
  }
})

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
</select>

<button class="addOption">+</button>
<button class="rOption">-</button>

This is Good but how can I do the New Thing Part? Taking that out of the Options and make it like a + Button? When I press it the popup appear I add the Text and press Ok and it adds it to the Selector — Andrei Ref, Oct 05 '17 at 06:58
Do you know why when I create the Option and select it to add it into a table TD. If I have 5 Options added and select the 2nd one. It puts number 2 inside the TD and not what the Option contains — Andrei Ref, Oct 05 '17 at 07:39
@AndreiRef I guess its because you insert the Value of the option, try with .text() — Carsten Løvbo Andersen, Oct 05 '17 at 07:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155996/discussion-between-andrei-ref-and-carsten-lovbo-andersen). — Andrei Ref, Oct 05 '17 at 08:05

score -2 · Answer 2 · answered Oct 05 '17 at 06:57

-2

Try this one. Put ID on your drop down first. then append it using the process I showed

for($x = 2; $x < 4; $x++){
  $('#mySelect').append($('<option>', {
    value: $x,
    text: $x
  }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <select id="mySelect">
  <option value ="1"> 1</option>
  </select>

answered Oct 05 '17 at 06:57

Rey Norbert Besmonte

791
2
12
29

How does this apply to the question/problem the OP has? – Carsten Løvbo Andersen Oct 05 '17 at 06:58
@CarstenLøvboAndersen its a basic add of option on the selector. it shows that you can use a variable to add any value to the option box. from there he can derive how he will pass the value and the text for the option – Rey Norbert Besmonte Oct 05 '17 at 07:00

How can I add/remove Options in a Selector?

2 Answers2