jQuery - Change <option> values dynamically from <select> box in a [array] way

Question

How can I change <select> box <option> values dynamically to new list?

Let say, I have selec box like below:

<select class="form-control selectOptions">
  <option>Default Option 1</option>
  <option selected>Default Option 2</option>
  <option>Default Option 3</option>
</select>

and above option values has to replaced with:

<select class="form-control selectOptions">
  <option>New Option 1</option>
  <option>New Option 2</option>
  <option>New Option 3</option>
  <option selected>New Option 4</option>
  <option>New Option 5</option>
</select>

I have tried below code:

 $(document).ready(function(){

   var selectBox = $("select.selectOptions"); 
   selectBox.empty();

   $("<option value='new_option_1'>New Option 1</option>").appendTo(selectBox);
   $("<option value='new_option_2'>New Option 2</option>").appendTo(selectBox);
   $("<option value='new_option_3'>New Option 3</option>").appendTo(selectBox);
   $("<option value='new_option_4'>New Option 4</option>").appendTo(selectBox);
   $("<option value='new_option_5'>New Option 5</option>").appendTo(selectBox);

   $("select.selectOptions option:eq(3)").attr("selected", "selected");

 });

but it will be hard to change if I have more options.

So, how can I create an array like below...

And <option> value also should be dynamic.. Eg: For New Option 4, value should be new_option_4

var myNewOptions = [ New Option 1, New Option 2, New Option 3, New Option 4, New Option 5 ];...

Online Demo

guest271314 · Accepted Answer · 2015-12-09 13:32:17Z

1

Try using $.map() , String.prototype.toLowerCase() , String.prototype.replace() with RegExp /\s/g to match space characters between words in myNewOptions array, .outerHTML , .append() ; creating a variable selected to set fourth option created property selected to true

var myNewOptions = [
    "New Option 1",
    "New Option 2",
    "New Option 3",
    "New Option 4",
    "New Option 5"
  ],
  selected = 3;

var options = $.map(myNewOptions, function(opts, index) {
  return $("<option>", {
    value: opts.toLowerCase().replace(/\s/g, "_"),
    html: opts,
    selected: index === selected ? true : false
  })[0].outerHTML
});

$(".form-control").empty().append(options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select class="form-control selectOptions">
  <option>Default Option 1</option>
  <option selected>Default Option 2</option>
  <option>Default Option 3</option>
</select>

answered Dec 9, 2015 at 13:32

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

Reddy Over a year ago

@guest271314... Excellent.. This is what I am looking for... Thanks :)

Jai · Accepted Answer · 2015-12-09 13:29:21Z

You can use this function to generate options dynamically by passing number of options to generate, selector to put options and index of the selected option:

var ns = {
  genOpts: function(num, sel, selOpt) {
    $(sel).empty();
    for (var i = 0; i < num; i++) {
      $('<option>', {
        text: 'New Option ' + i,
        value: 'new_option_' + i
      }).appendTo(sel);
    }
    $(sel).find('option').eq(selOpt).attr('selected', 'selected');
  }
};

ns.genOpts(5, ".selectOptions", 3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control selectOptions">
  <option>Default Option 1</option>
  <option selected>Default Option 2</option>
  <option>Default Option 3</option>
</select>

Collectives™ on Stack Overflow

jQuery - Change <option> values dynamically from <select> box in a [array] way

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related