Question

对于那些对我来说比Javascript更舒服的人来说，这是一些低调的成果......

我想改进Moodle插件的管理界面。（Moodle是一个基于PHP的Web应用程序）。我需要做的是采用当前的文本框，用分号分隔的条目，并用可编辑的列表替换它。

我将使用的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

如何在无需重新加载的情况下编辑的网页中创建列表

1 个答案: