如何使一個網頁列表，可以在不重裝

Question

編輯下面是對於那些更舒適的使用Javascript比我一些低掛水果...

我想改善的Moodle插件的管理界面。 （Moodle是一個基於PHP的網絡應用程序）。我需要做的是採取目前的文本框，用分號分隔條目，並用可編輯列表替換。

我會使用的HTML元素是select列表，text input field和另一個隱藏的文本字段。我猜也有一些提交按鈕，一個用於添加，另一個用於刪除條目。

行爲將是：

• 參賽作品可以在某種提交的被添加到選擇列表從可見的文本框（這不能重新加載頁面）。

• 隱藏的文本框將包含選擇列表中的所有條目，只是分號分隔

• 有從選擇列表也不會重新加載頁面刪除條目的功能。

• 隱藏的文本框與添加更新/刪除操作

這似乎是我喜歡的事，是很容易。雖然我很難找到一個足夠接近的例子來撕掉。

This sample code與我迄今爲止發現的一樣接近。這裏有一些很好的例子。任何體面的指針都會獲得+票。

Answer 1

您想要做的就是使用JavaScript並使用網頁的DOM進行操作。基本上，網頁的HTML由瀏覽器解析並呈現爲元素樹。像<select>這樣的每個HTML標籤都是樹中的一個元素。您可以使用JavaScript與此樹進行交互，方法是執行從此樹中刪除元素或將元素添加到此樹中的操作。 （請注意，樹上的預形成操作不會刷新頁面。）

在JavaScript中執行這些操作的標準化API被稱爲DOM。然而，包括我自己在內的很多人都認爲這個API非常笨重，並且不夠表達。做微不足道的事情需要大量的代碼。出於這個原因，許多開發人員不直接使用DOM，而是使用更強大的庫（如jQuery）來使他們的生活更輕鬆。

下面是一些HTML + JavaScript的示例，我認爲它們可以模仿大部分需求。理想情況下，爲了學習目的，這將純粹使用標準的W3C DOM API編寫，但由於您的問題不是那麼簡單，所以我採取了使用jQuery的方式。

的HTML：

<select id="list" multiple="multiple"></select> 
<input id="removeButton" type="button" value="Remove"></input> 

<div> 
    <input id="optionAdder" type="text"></input> 
    <input id="addButton" type="button" value="Add"></input> 
</div> 

<br> 
<input id="clearButton" type="button" value="Clear All"></input> 
<div>Not So Hidden: <input id="hidden" type="text"></input></div> 

中的JavaScript：

// Uses jQuery to define an on document ready call back function 
$(function(){ 
    // The code in this function runs when the page is loaded 


    var options = []; // contains all the options 

    // add new option to drop-down 
    var addOption = function(optText) { 

     // Create new option element and add it to the <select> tag 
     $('<option></option>') 
      .attr('value', optText).text(optText) 
      .appendTo($('#list')); 
    }; 

    // writes the names of all the options in the "hidden" text box 
    var fillHidden = function() { 
     $('#hidden').val('');   
     var hiddenText = ""; 
     for(var i=0; i< options.length; i++) { 
      if(hiddenText) { 
       hiddenText += "; "; 
      } 
      hiddenText += options[i]; 
     } 
     $('#hidden').val(hiddenText);  
    } 

    // Bind the click event of the "Add" button to add an option on click 
    $('#addButton') 
     .click(function(){ 
      var optText = $('#optionAdder').val(); 

      if(optText) { 
       addOption(optText); 
      } 
      $('#optionAdder').val(''); 
      options.push(optText); 
      fillHidden(); 
     }); 

    // Bind the click event of the "Remove" button to remove the selected options on click 
    $('#removeButton') 
     .click(function(){ 
      $('#list option:selected').each(function(){ 

       var optIndex = $.inArray($(this).val(), options); 
       if(optIndex > -1) { 
        options.splice(optIndex, 1); 
        $(this).remove(); 
       } 
       fillHidden(); 
      }); 
     }); 

    // Bind the click event of the "Clear" button to clear all options on click 
    $('#clearButton') 
     .click(function(){ 
      $('#list').children().remove(); 
      options = []; 
      fillHidden(); 
     }); 
}); 

這裏是一個jsfiddle demonstrating the code