如何使用javascript在下拉列表中選擇名稱？

Question

我試過使用這些。使用getElementById它適用於帶有ID的下拉菜單。但是，當更改爲沒有ID的下拉列表中的getElementsByName時，它不會。

var name = "Charlie"; 
 
function setSelectedIndex(s, v) { 
 
    for (var i = 0; i < s.options.length; i++) { 
 
     if (s.options[i].text.slice(0,name.length) == v) { 
 
      s.options[i].selected = true; 
 
      return; 
 
     } 
 
    } 
 
} 
 
setSelectedIndex(document.getElementsByName('attributes[10]'),name);

<select name="attributes[10]" title="Football Player" class="attribute_selected attribute_required"> 
 
    <option value="">Select name</option> 
 
    <option value="" selected="selected"></option> 
 
    <option value="159" >David</option> 
 
    <option value="163" >Charlie</option> 
 
    <option value="407" >Chris</option> 
 
    <option value="161" >Ramon</option> 
 
    <option value="356" >John</option> 
 
</select>

Answer 1

getElementsByName返回數組，但返回的getElementById DOM對象。

getElementsByName

getElementById

Answer 2

您發現getElementsByName的s，這暗示它返回的元素集合不只是一個單一的一個。要訪問此集合中的元素，可以使用數組符號collection[index]。
因此，在你的代碼

var name = "Charlie"; 
 
function setSelectedIndex(s, v) { 
 
    for (var i = 0; i < s.options.length; i++) { 
 
     if (s.options[i].text.slice(0,name.length) == v) { 
 
      s.options[i].selected = true; 
 
      return; 
 
     } 
 
    } 
 
} 
 
setSelectedIndex(document.getElementsByName('attributes[10]')[0],name);

<select name="attributes[10]" title="Football Player" class="attribute_selected attribute_required"> 
 
    <option value="">Select name</option> 
 
    <option value="" selected="selected"></option> 
 
    <option value="159" >David</option> 
 
    <option value="163" >Charlie</option> 
 
    <option value="407" >Chris</option> 
 
    <option value="161" >Ramon</option> 
 
    <option value="356" >John</option> 
 
</select>