显示未捕获的TypeError：无法将属性“selected”设置为null

Question

显示未捕获的TypeError：无法将属性“selected”设置为null

    <select id="sorter" class="sorter-options">                                                             
    <option value="name">Product Name </option>
    <option value="price">Price</option>
    <option value="sort_by">Scale</option>
    </select>


   <script type="text/javascript">
    var val = '';    
    document.querySelector('#sorter [value="' + val + '"]').selected =  true;
   </script>

Answer 1

你没有选项是val=''，因此选择器返回预期的null。

如果您愿意，可以添加默认的空选项

<select id="sorter" class="sorter-options">                     <option value="">Select options</option>             
    <option value="name">Product Name </option>
    <option value="price">Price</option>
    <option value="sort_by">Scale</option>
    </select>

 <script type="text/javascript">
    var val = '';    
    document.querySelector('#sorter [value="' + val + '"]').selected =  true;
   </script>
  

或者将值设置为可用选项

 var val = 'price';    
 document.querySelector('#sorter [value="' + val + '"]').selected =  true;

或者在检查所选值之前提供存在检查。

 var val = '';    
 document.querySelector('#sorter [value="' + val + '"]') !== null? document.querySelector('#sorter [value="' + val + '"]').selected =  true: null;

或者如果您只想设置默认值，请在select上使用defaultValue

<select id="sorter" class="sorter-options" defaultValue="price">

Answer 2

val是一个空字符串，而此片段中没有option有一个空字符串作为值。创建一个值为空字符串的选项或将预设值option设置为val

var val = 'price';
document.querySelector('#sorter [value="' + val + '"]').selected = true;

<select id="sorter" class="sorter-options">                                                             
    <option value="name">Product Name </option>
    <option value="price">Price</option>
    <option value="sort_by">Scale</option>
    </select>