还有另一种方法可以选择下拉菜单中的哪个元素？

Question

给定表单的下拉菜单

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

选择默认选择哪个选项的正常方法是将selected属性添加到选项标签。即<option selected>。

但是，就我的目的而言，如果我可以使用 <select> 标记中的属性来选择默认选择哪个选项，会容易得多。

有没有办法做到这一点？

Answer 1

选项1（纯JS）：

获取类名sel的所有select，使用forEach设置默认属性的值。

var sel = document.getElementsByClassName('sel');

Array.prototype.forEach.call(sel ,function(ele){  
   ele.value = ele.getAttribute('default');
});

<select default="2" class="sel">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<br>
<select default="3"  class="sel">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

选项 2（使用 jQuery）：

使用 each 方法选择所有元素，将 selected 选项设置为默认属性。

//init default
$('select').each(function(){
  $(this).val($(this).attr('default'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select default="2">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<br>
<select default="3">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>