javascript函數添加到下拉菜單

Question

好吧，說我有這個下拉菜單，看起來像這樣：

<form action="" method="POST" name="myform"> 
      <select name="test_select"> 
       <option value="1">my val 1</option> 
       <option value="3">my val 3</option> 
       <option value="4">my val 4</option> 
      </select> 
      <input type="submit" value="test_button" name="test_button"> 
     </form> 

只是一個基本的菜單。如何通過功能搜索並在菜單中添加值2？我想它最終看起來是這樣的：

<form action="" method="POST" name="myform"> 
       <select name="test_select"> 
        <option value="1">my val 1</option> 
        <option value="2">my val 2</option> 
        <option value="3">my val 3</option> 
        <option value="4">my val 4</option> 
       </select> 
       <input type="submit" value="test_button" name="test_button"> 
      </form> 

我試着做一個函數，以顯示我正在試圖去與此。

<script> 
     function addItems() 
     { 
      var option = document.createElement("option"); 

      option.text = "val 2" 
      option.value = 2 

      for (var i = 1; i < 3; i++;) { 
       if (document.getElementsByName.value < 2) { 
        option.text = "val 2" 
        option.value = 2 
       } 
      } 

     } 
    </script> 

如何讓此功能起作用？

Answer 1

我修改您的代碼位，使其工作

function addItems() 
    { 
     var option = document.createElement("option"); 

     option.text = "val 2"; 
     option.value = 2; 

     var select = document.getElementsByName('test_select'); 
     var firstGreater = null; 
     if (select.length > 0) 
     { 
     for(var i = 0; i < select[0].children.length; i++) 
     { 
      if (select[0].children[i].value > 2) 
      { 
      firstGreater = select[0].children[i]; 
      break; 
      } 

     } 
     if (firstGreater != null) 
      select[0].insertBefore(option, firstGreater); 
     else 
      select[0].appendChild(option); 
     }  

    } 

這個片段不需要添加l你可以在這裏看到現場演示on JSBin

Answer 2

到這個鏈接可能會有所幫助

http://www.electrictoolbox.com/javascript-add-options-html-select/

Adding options to a <select> using jQuery?

希望它有助於

Answer 3

首先，你有很多語法錯誤。但讓我們從HTML開始。

<form action="" method="POST" name="myform"> 
    <select name="test_select" id="test_select"> 
     <option value="1">my val 1</option> 
     <option value="3">my val 3</option> 
     <option value="4">my val 4</option> 
    </select> 
    <input type="button" value="test_button" name="test_button" onclick="addItems();"> 
</form> 

爲您的選擇添加一個id屬性，以便您能夠在您的javascript代碼中找到該元素。同時將onclick回調添加到按鈕中，以便在您點擊按鈕時調用該函數。我將類型從提交更改爲按鈕，以避免重新加載頁面。

這裏是代碼：

function addItems() { 
    var option = document.createElement("option"); 

    option.text = "my val 2" 
    option.value = 2 

    var combo = document.getElementById("test_select"); 

    var found = false; 

    for (var i = 0; i < combo.length; i++) { 
     if (parseInt(combo[i].value) > 2) { 
      combo.add(option, combo[i]); 
      found = true; 
      break; 
     } 
    } 

    if(!found) { 
     combo.add(option, null); 
    } 


    return false; 
} 

該組合變量指向你的選擇，這樣你就可以通話時長來獲得當前的大小，還可以使用[]來獲得在給定位置的選項。

的。新增（）函數添加新的選項作爲第二個參數通過如下解釋選項前：.add()

此代碼假定您的選擇預先排序。

欲瞭解更多信息：

HTML DOM Select Object