jQuery - 以[array]方式从框动态更改值

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

如何将 box 值动态更改为新列表?

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

并且值也应该是动态的。例如:对于新选项4,值应为new_option_4

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

var myNewOptions = [新选项1,新选项2,新选项3,新选项4,新选项5]; ...

Online Demo

2 个解决方案

#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

尝试使用带有RegExp / \ s / g的$ .map(),String.prototype.toLowerCase(),String.prototype.replace()来匹配myNewOptions数组中的单词之间的空格字符,.outerHTML,。appel();创建一个选定的变量,将第四个选项创建的属性设置为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>

#2

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:

您可以使用此函数动态生成选项,方法是将选项数传递给generate,选择器以放置所选选项的选项和索引:

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>