2012-08-03 34 views
1

我想限制將多個項目添加到第二個列表框,我想我非常接近它。請幫助Javascript限制將同一項目多次添加到第二個列表框

<script type="text/javascript"> 
    function CopyFile() { 
     var firstListBox = document.getElementById('<%= lstFirstBox.ClientID %>'); 
     var secondListBox = document.getElementById('<%= lstTarget.ClientID %>'); 
     for (var i = 0; i < firstListBox.options.length; i++) { 
      if (firstListBox.options[i].selected) { 
       for (var j = 0; j < secondListBox.options.length; j++) { 
        if (firstListBox.options[i].selected == secondListBox.options[j]) { 
         alert("Multiple selection will not allow"); 
        } 
        else { 
         var newOption = document.createElement("option"); 
         newOption.text = firstListBox.options[i].text; 
         newOption.value = firstListBox.options[i].value; 
         secondListBox.options[secondListBox.options.length] = newOption; 
         firstListBox.options[i].selected = false; 
        } 

       } 

      } 
     } 
     return false; 

    } 
</script> 
+0

當你運行代碼時會發生什麼?任何錯誤? – codebox 2012-08-03 12:20:20

+0

代碼doesnot將項目從第一個列表框複製到另一個.. – Naveen 2012-08-03 12:21:54

+0

你有沒有嘗試過在這一行上使用'appendChild'? 'secondListBox.options [secondListBox.options.length] = newOption;' – jbabey 2012-08-03 12:30:18

回答

1

我給你寫了一個例子。以下的HTML頁面有兩個選擇和一個按鈕。如果您在第一次選擇中選擇一個選項並按下按鈕,該選項將被複制到第二次選擇,除非它已經在那裏。在最後一種情況下,它會提醒消息。嘗試它,複製粘貼到一個文件(例如「test.htm」),並在瀏覽器中打開它。

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function tryToCopy() { 
       var select1 = document.getElementById("select1"); 
       var select2 = document.getElementById("select2"); 
       var optionToBeCopied = select1.options[select1.selectedIndex]; 
       var contains = false; 
       for(var i = 0, ceiling = select2.options.length; i < ceiling; i++) { 
        if(select2.options[i].value == optionToBeCopied.value) { 
         contains = true; 
         break; 
        } 
       } 
       if(contains) { 
         alert("duplicate options are not allowed."); 
       } else { 
        var option = document.createElement("option"); 
        select2.appendChild(option); 
        option.value = optionToBeCopied.value; 
        option.text = optionToBeCopied.text; 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <select id="select1"> 
      <option value="" selected="true"></option> 
      <option value="a">a</option> 
      <option value="b">b</option> 
     </select> 
     <select id="select2"> 
     </select> 
     <input type="button" value="tryToCopy" onclick="tryToCopy()"/> 
    </body> 
</html> 
+0

所選項目不復制到下一個列表框 – Naveen 2012-08-03 12:24:50

+0

非常感謝tom讓我試試這個 – Naveen 2012-08-03 12:43:15

+0

其工作正常 – Naveen 2012-08-03 12:58:29

相關問題