Question

我有一个Select HTML组件，我正在向其中动态添加选项

这是我的代码，功能正常运行

基于selectedValue，我将所选属性动态添加到Option

是否有更好的方法来添加所选属性

$(document).ready(function() {
    var option = '';
    var cars = ["Saab", "Volvo", "BMW"];
    var selectedValue = 'Volvo'

        for (var i = 0; i < cars.length; i++) {
            if (selectedValue && cars[i] == selectedValue)
                option += '<option value="' + cars[i] + '" selected>' + cars[i] + '</option>';
            else
                option += '<option value="' + cars[i] + '">' + cars[i] + '</option>';
        }

    $('#carscomponent').append(option);
});

https://jsfiddle.net/wmLsv94x/3/

Answer 1

这就是我要优化代码的方式。

摆脱不必要的jQuery。
使用DOM API创建选项元素，而不是使用字符串。

document.addEventListener('DOMContentLoaded', function() {
  const options = [];
  const cars = ["Saab", "Volvo", "BMW"];
  const selectedValue = 'Volvo';
  const carsComponent = document.getElementById('carsComponent');

  for (let car of cars) {
    let option = document.createElement('option');
    option.selected = car === selectedValue;
    option.value = car;
    option.textContent = car;
    options.push(option)
  }
  
  for (let option of options) {
    carsComponent.appendChild(option);
  }
});

<select id="carsComponent"></select>

如果您想进一步优化（从性能角度考虑），请先使用documentFragment附加单个选项，然后在带有该片段内容的select上使用appendChild。

对于循环创建选项

1 个答案: