Append options with multiple select into simple select

jquery add select option dynamically
jquery append option to select and set selected
jquery add option to select list
select2 add option if not found
jquery clear select options
remove option from select jquery
jquery add options to select from array
jquery select option

I'm using multiple select for fill a simple select. I'm trying to if I select a value and it doesn´t exists append to simple select, if exists do not do anything, but if I unselect option, remove it from simple select. How could I do that?

$(function() {

  $(document).on('change', '#foo', function() {
    var values = $(this).val();

    values.forEach(function(val) {
      $('#bar option').each(function() {
        var v = $(this).val();
        if (values.indexOf(v) === -1) {
          $('#bar').append('<option value="' + val + '">' + val + '</option>');
          return false;
        }
      });
    });
  });
});
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

Remove all options except the disabled one from #bar after #foo changed and create new options and appendTo() #bar.

$(function() {
  $(document).on('change', '#foo', function() {
    var values = $(this).val() || []; // in case you don't select anything
    $('#bar option:not(:disabled)').remove()
    values.forEach(function(val) {
      $('<option>', {
        value: val,
        text: val
      }).appendTo('#bar')
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

HTML select multiple Attribute, How do I select multiple options from a drop down list in HTML? SELECT APPENDING query is used to append SELECT query result directly to some other internal table. Below is the syntax for SELECT APPENDING; SELECT <FIELD1> <FIELD2> from <DATABASE_TABLE> APPENDING TABLE <ITAB> WHERE <FIELD> = <COND_VALUE>.

You have to empty the children upon every change or else the new <option>s will get appended and the list becomes very long. Try this:

$(function() {

  $(document).on('change', '#foo', function() {
    var values = $(this).val();
    $('#bar').empty().append('<option selected disabled>Add some from multiple</option>');
    values.forEach(function(val) {
      $('#bar option').each(function() {
        var v = $(this).val();
        if (values.indexOf(v) === -1) {
          $('#bar').append('<option value="' + val + '">' + val + '</option>');
          return false;
        }
      });
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

How to select multiple options in a dropdown list with JavaScript?, This did NOT work in IE8 (yet did in FF): $("#selectList").append(new Option("​option text", "value"));. This DID work: var o = new Option("option  From a web designer’s perspective, allowing the user to choose multiple options from a select box is fairly simple and straightforward. We just need to add the "multiple" attribute to the <select> element. Now, in order to select multiple options, you have to add a size attribute also to the select element. This will make the select box look like a box rather than just the drop-down.

You should bind click event rather than change, because if you click same option twice, change event cannot be listened. You can try the following code.

$(function() {
  //get onclick value
  $(document).on('click', '#foo', function() {
    let value = $(this).val();

    //get existing values in #bar
    let exist = false;
    $("#bar option").each(function(){
      if($(this).val() == value){
        exist = true;
    //remove if exist
        $(this).remove();
      }
    });
  //append if not exist
  if(!exist){
      $('#bar').append(`<option value="${value}">${value}</option>`);
}
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled value="default">Add some from multiple</option>
</select>

How to create a select box with multiple selections, How to add active class on click event in custom list group in Bootstrap 4 ? How to create An option can be added to a select element using 3 approaches in jQuery: Method 1: Append the option value = "basic" >Basic</ option >. </ select > How to select an element with multiple classes using jQuery ? How to select  An option can be added to a select element using 3 approaches in jQuery: Method 1: Append the option tag to the select box . The option to be added is created like a normal HTML string. The select box is selected with the jQuery selector and this option is added with the append() method. The append() method inserts the specified content as the

Well you're going to have more problems than this I think, but if you're just looking how to remove an option, you could do something like this

$("#bar option([value=" + val+ "]").remove();

How to add options to a select element using jQuery?, Programmatically adding, selecting, and clearing options in a Select2 control. by creating a new Javascript Option object and appending it to the control: var data You can also pass an array to val make multiple selections: The best way to deal with this, therefore, is to simply add the preselected item as a new option. If you are referring to select-options defined in a selection screen. This mulitple selections functionality is handled automatically for you. For example, say you have a select-option for date and you have to select records from your database based on that select-option, you would use the IN operator in your select statement.

Adding options to a <select> using jQuery?, Installation · Basic usage · Builds and modules In addition to a prepopulated menu of options, Select2 can dynamically create new options from text input by the user in Tagging can also be used in multi-value select boxes. Try entering a value that isn't listed in the dropdown - you'll be able to add it as a new option! There are many ways you can populate data into the select element from various sources. In this article, I am going to show you few examples on how to add and remove, single or multiple options in the select element using jQuery.

Add, select, or clear items, My last jQuery post looked at how to count the number of options in a select and then clear all options from the select. This post looks at Adding a single option can be done by appending HTML to the select box. Adding multiple options. tail.select is a rewritten version of the jQuery tail.select plugin that can be used to beautify & enhance the default select box with no dependency. Multiple Select Enhancement Library – Select7. Select7 is a vanilla JavaScript plugin to create a user-friendly multi-select control from a regular select element.

Dynamic option creation, Next post. Friday's post will look at how to add a language selection drop down box in FCKEditor, using the way of populating a select drop down box with  SQL SELECT INTO – Insert Data from Multiple Tables. In previous examples, we created a table using the SELECT INTO statement from a single table Employee. We can also join multiple tables and use the SELECT INTO statement to create a new table with data as well. In this section, we want to join multiple tables together.

Comments
  • You want to remove the remaining values from the previous select?
  • Nope, for example, I select value1 and value2 and them add to simple select. If I unselect value1, it must be removed from simple select, but value2 must being there.
  • It is an interesting answer. Thanks sensei
  • No, the selected options are not in #bar but #foo. Moreover, it is to remove the options that don't have disabled attribute in #bar, so it can't be :checked.