請提出一個好的解決方案

-4

在我的項目中，我想實現代碼，我需要保留兩個列表框（asp控件），並且我想在這兩個列表框之間實現添加刪除功能列表框應該被添加到另一個列表框中，並且應該先從另一個列表框中移除。請提出一個好的解決方案

如何使用JavaScript實現此效果？任何指向教程的鏈接也會有所幫助。在此先感謝。

來源

2010-07-31 NoviceToDotNet

Java或JavaScript的？除此之外，你到目前爲止嘗試過什麼？ – MvanGeest 2010-07-31 18:19:00

爲了能夠提供幫助，我們需要更多的細節，儘可能清晰。有人可以基於這個提供的基本建議是「學習使用jQuery」，這可能會有幫助，也可能沒有幫助。 – JAL 2010-07-31 18:22:28

我相信他想要做這樣的事情：http://jsfiddle.net/7tZ6H/ – 2010-07-31 18:26:13

你可以使用我在這裏提供的源代碼，這是從http://www.johnwbartlett.com/CF_tipsNtricks/index.cfm?TopicID=86

<html> 
<head> 
<title>Multi-list copy example</title> 
<body> 
<script language="Javascript"> 
function SelectMoveRows(SS1,SS2) 
{ 
    var SelID=''; 
    var SelText=''; 
    // Move rows from SS1 to SS2 from bottom to top 
    for (i=SS1.options.length - 1; i>=0; i--) 
    { 
     if (SS1.options[i].selected == true) 
     { 
      SelID=SS1.options[i].value; 
      SelText=SS1.options[i].text; 
      var newRow = new Option(SelText,SelID); 
      SS2.options[SS2.length]=newRow; 
      SS1.options[i]=null; 
     } 
    } 
    SelectSort(SS2); 
} 
function SelectSort(SelList) 
{ 
    var ID=''; 
    var Text=''; 
    for (x=0; x < SelList.length - 1; x++) 
    { 
     for (y=x + 1; y < SelList.length; y++) 
     { 
      if (SelList[x].text > SelList[y].text) 
      { 
       // Swap rows 
       ID=SelList[x].value; 
       Text=SelList[x].text; 
       SelList[x].value=SelList[y].value; 
       SelList[x].text=SelList[y].text; 
       SelList[y].value=ID; 
       SelList[y].text=Text; 
      } 
     } 
    } 
} 
</script> 
<form name="Example"> 
<table border="0" cellpadding="3" cellspacing="0"> 
    <tr> 
     <td> 
      <select name="Features" size="9" MULTIPLE> 
       <option value="2">Row 2</option> 
       <option value="4">Row 4</option> 
       <option value="5">Row 5</option> 
       <option value="6">Row 6</option> 
       <option value="7">Row 7</option> 
       <option value="8">Row 8</option> 
       <option value="9">Row 9</option> 
      </select> 
     </td> 
     <td align="center" valign="middle"> 
      <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br> 
      <br> 
      <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)"> 
     </td> 
     <td> 
      <select name="FeatureCodes" size="9" MULTIPLE> 
       <option value="1">Row 1</option> 
       <option value="3">Row 3</option> 
      </select> 
     </td> 
    </tr> 
</table> 
</form> 

</body> 
</html>

來源

2010-07-31 18:27:48

如果你有一些HTML這樣的：

<select id="listBox1" size="5"> 
<option value="1">Item 1</option> 
<option value="2">Item 2</option> 
<option value="3">Item 3</option> 
</select> 

<select id="listBox2" size="5"> 
<option value="4">Item 4</option> 
<option value="5">Item 5</option> 
<option value="6">Item 6</option> 
</select> 

<a href="#" id="moveLink">Move selected from list 1 to list 2</a>

那麼下面的jQuery將採取從表1所選項目並將其移動到列表2點擊moveLink時。

$(function() { 
    $('#moveLink').click(function() { 
     $('#listBox1 option:selected').each(function(i, opt) { 
      $('#listBox2').append($('<option></option>').attr('value', opt.val()).text(opt.text()); 

      $(opt).remove(); 
     }); 
    }); 
});

訪問www.jquery.com以獲取圖書館以包括在網頁中以及爲此工作。

來源

2010-07-31 18:27:10

這可能是你所需要的複製： http://www.dotnetspider.com/resources/21388-Add-Remove-from-one-Listbox-another-ListBox.aspx

來源

2010-07-31 18:28:02 EddieC

請提出一個好的解決方案

回答

相關問題