Javascript 如何在网页中创建一个无需重新加载即可编辑的列表

对于那些比我更熟悉Javascript的人来说，这里有一些很容易解决的问题

我想改进Moodle插件的管理UI。Moodle是一个基于PHP的web应用程序。我需要做的是获取一个文本框，其中包含分号分隔的条目，并将其替换为可编辑列表

我将使用的HTML元素是一个列表、一个文本字段和另一个隐藏的文本字段。我猜还有两个提交按钮，一个用于添加，另一个用于删除条目

这种行为将是：

在某种类型的提交后，可以从可见文本框将条目添加到选择列表中。这无法重新加载页面

隐藏的文本框将包含选择列表中的所有条目，仅以分号分隔

有一个从选择列表中删除条目的功能，也不会重新加载页面

使用添加/删除操作更新隐藏的文本框

在我看来，这似乎很容易。虽然我很难找到一个足够接近的例子来剽窃

---

是目前为止我发现的最接近的。肯定有一些很好的例子可以证明这一点。任何合适的指针都将获得+选票。

您要做的是使用JavaScript并使用网页的。基本上，网页的HTML由浏览器解析并呈现为元素树。每个HTML标记都是树中的一个元素。您可以使用JavaScript通过执行诸如从该树中删除元素或向该树中添加元素之类的操作来与该树进行交互。请注意，树上的预执行操作不会刷新页面

在JavaScript中进行此类操作的标准化方法称为DOM。然而，包括我在内的许多人都认为这个API非常笨拙，几乎没有足够的表现力。即使是做一些琐碎的事情也需要大量的代码。出于这个原因，许多开发人员不直接使用DOM，而是使用更强大的库，例如，使他们的生活更轻松

下面是一些HTML+JavaScript的示例，我认为它们模仿了您的大多数需求。理想情况下，出于学习目的，这将完全使用标准的W3CDOMAPI编写，但由于您的问题并不是那么简单，因此我转而使用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();
        });
});

---

这是一首非常有用的歌曲。谢谢你的高层解释。我以前使用过jQuery。虽然我避免学习很多javascripty内容，只是因为我设法找到了代码片段并使用它们。你的解释有助于从头开始写东西。无论如何，确实是+1。一旦我也开始做了，我可能会接受。再次感谢！此函数中的代码在加载页面时运行-这是一个默认的js操作吗？在未命名函数时加载时执行？这不是JavaScript中的默认行为，而是一个非常复杂的操作。请注意，这是一种简写形式，较长的形式是$document.readyfunction{…}。使用它，所提供函数中的代码将在浏览器解析HTML并加载DOM后立即运行。