2012-09-28 58 views
1

我有一個表單,用戶可以選擇他們想要留在的幾個位置,他們必須指定他們將在每個位置的時間,但首先,他們必須輸入多少例如,如果我想要在兩個地點分別在第一個地點和第二個地點的兩個地點工作,我必須先輸入5天,然後選擇我想要的地點留在指定每個位置我想要在那裏多少天。 那麼,事情是,爲了防止用戶輸入錯誤的天數爲一個位置,我爲每個位置創建了一個選擇元素,所以當用戶輸入一般天數時,我用這些信息填充選擇元素(從1到日數),這是工作得很好,但是當用戶選擇一個位置並指定該位置的一天數量時,我希望剩餘的select元素被填充剩餘的日子,所以我使用此代碼來執行這向多個選擇元素添加新選項問題

function fillUpSelects2(start, top, who) { 

    var optionArray = new Array(); 

    // create the new options 
    for (var i = 1; i <= top; i++) { 
     optionArray.push(new Option(i, i)); 
    } 

    // get all the select elements 
    var selects = jQuery("select.estanciaselect"); 

    // loop through the selects to change their content 
    for (var i = 0; i < selects.length; i++) { 

     // if selects[i] is not the one who triggered the change event 
     if (selects[i].getAttribute('id') != who) { 

      // then I erase all its options 
      selects[i].options.length = 0; 

      //and here is where it is supposed to add the new options 
      for (var j = 0; j < optionArray.length; j++) { 
       selects[i].options[selects[i].options.length] = optionArray[j]; 
      } 
     } 
    } 
} 

很好,當我跑這一切的選擇最終爲空,但最後一個得到它填補了properlly

回答

1

如果你使用jQuery,你不妨用它來一個PPEND他們:

for (var i = 1; i <= top; i++) { 
    $(".selects").prepend($("<option>") 
           .val(i)  // Might have to use .attr("value", i) instead 
           .html(i)); 
} 

這裏有一個的jsfiddle展示兩個選項,你可以使用(包括上面的一個),但也有很多更多:

http://jsfiddle.net/tRHYk/

+0

它的工作感謝您的幫助。順便說一下,我使用.attr(「value」,「some value」) – Armando

+0

因此,如果我不想使用jQuery,那麼我將不得不使用示例 – Armando

+0

@ user607502中描述的第一個選項。我真正使用jQuery的意思是使用'.append'和'.prepend'方法。但我想是這樣。你喜歡什麼取決於你。我喜歡第二個例子的原因是因爲它允許您使用jQuery方法更一致地操縱事物。 (這顯然不適用於

0

以下是關於如何添加項目的方法多選(雖然不是直接回答你的問題)

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     var o = new Option("option text", "value"); 
     $(o).html("option text"); 
     $("#leftValues").append(o); 

    }); 
</script> 

<select id="leftValues" size="5" multiple></select> 

參考Adding options to a <select> using jQuery?