Question

如何更改＆lt; select＆gt;框＆lt;选项＆gt;值动态到新列表？比方说，我有如下选择框：＆lt; select class =“form-control selectOptions”＆gt; ＆lt; option＆gt;默认选项1＆lt; / option＆gt; ＆lt;选择的选项＆gt;默认选项2＆lt; /选项＆gt; ＆lt; option＆gt;默认选项3＆lt; / option＆gt; ＆LT; /选择＆GT; 以上选项值必须替换为：＆lt; select class =“form-control selectOptions”＆gt; ＆lt; option＆gt;新选项1＆lt; / option＆gt; ＆lt; option＆gt;新选项2＆lt; / option＆gt; ＆lt; option＆gt;新选项3＆lt; / option＆gt; ＆lt;选择的选项＆gt;新选项4＆lt; /选项＆gt; ＆lt; option＆gt;新选项5＆lt; / option＆gt; ＆LT; /选择＆GT; 我试过下面的代码： $（文件）。就绪（函数（）{ var selectBox = $（“select.selectOptions”）; selectBox.empty（）; $（“＆lt; option value ='new_option_1'＆gt; New Option 1＆lt; / option＆gt;”）。appendTo（selectBox）; $（“＆lt; option value ='new_option_2'＆gt; New Option 2＆lt; / option＆gt;”）。appendTo（selectBox）; $（“＆lt; option value ='new_option_3'＆gt; New Option 3＆lt; / option＆gt;”）。appendTo（selectBox）; $（“＆lt; option value ='new_option_4'＆gt; New Option 4＆lt; / option＆gt;”）。appendTo（selectBox）; $（“＆lt; option value ='new_option_5'＆gt; New Option 5＆lt; / option＆gt;”）。appendTo（selectBox）; $（“select.selectOptions option：eq（3）”）。attr（“selected”，“selected”）; }）; 但如果我有更多的选择，就很难改变。那么，我怎样才能创建如下的数组...... 并且＆lt;选项＆gt;值也应该是动态的。例如：对于新选项4，值应为new_option_4 var myNewOptions = [ 新选项1，新选项2，新选项3，新选项4，新选项5 ] ... 在线演示

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试使用$.map()，String.prototype.toLowerCase()，String.prototype.replace()与RegExp /\s/g匹配myNewOptions数组中的字词之间的空格字符，{{1 }，.outerHTML;创建变量.append()以将第四个selected已创建的属性option设置为selected

＆＃13;

true

＆＃13;

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

＆＃13;

jQuery - 以[array]方式

2 个答案: