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

Question

给出表格的下拉菜单

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

默认情况下，选择选择哪个选项的常规方法是将selected属性添加到选项标记中。即<option selected>。

但是，出于我的目的，如果我可以使用<select>标记中的属性来选择默认情况下选择的选项会更容易。

有办法做到这一点吗？

Answer 1

选项1（纯JS）：

使用类名sel获取所有选择，使用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）：

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

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