0

嗨，我真的是 Javascript 的新手...当用户选择选项时，我正在尝试构建输入文本框列表。但是，当用户更改选项时，输入文本框会在之前的输入文本框旁边创建。因此，如果用户不断更改选项，可能会有 100 个输入框。我希望我的程序删除 span 中的所有内容并生成输入文本框列表。请给我任何建议！

function myInputs() {

        alert('writing inputs'); 
        var value = document.getElementById("name").value; 
        var split = value.split(",");
        var size = split.length;
        var out = document.getElementById("inputBox");
        $(this).parent('display').remove(); //doesn't delete any...
        for (var j=0; j<size; j++){
            if (split[j] != ""){
            var element = document.createElement("input");
            //Assign different attributes to the element.
            element.setAttribute("type", "text");
            element.setAttribute("value", split[j]);
            element.setAttribute("name", split[j]);
            out.appendChild(element);}
      }
};


//html
<table border="0">
<tr>
        <td>Select run : </td>
        <td><select id="name" name="name" onchange="myInputs()">
             <option value="time" name="timer">timer</option>
             <option value="date,time" name="Performance">Performance</option>
             <option value="location,time" name="Copy">Copy</option>
             </select>
        </td>
 </tr>
 </table>
 <div id="display"><span id = "inputBox"></span></div>
4

4 回答 4

2

因为页面上有 jQuery 代码，所以我使用了 jQuery。下面是更正后的 jsFiddle

缓存选择器以提高速度

var $select = $('#name');
var $input = $('#inputBox');

我曾经做过点​​击处理程序

$select.on("change",function(event){

    $input.empty();

    var value = $select.val().split(",");
    var size = value.length;

    for (var j=0; j<size; j++){
        if (value[j] != ""){
            var element = document.createElement("input");
            element.setAttribute("type", "text");
            element.setAttribute("value", value[j]);
            element.setAttribute("name", value[j]);
            $input.append(element);

            // could also do this but it is slower
            // var $element = $('<input/>',{
            //     type: "text",
            //     name: value[j],
            //     value: value[j]
            // });
            //$input.append($element);
        }
    }                
});

我还使用了 jQuery 值函数

$select.val();

您不想删除显示，因为 inputBox 被删除并且您无法再访问它。所以我只是在输入框上使用了empty。

$input.empty();

所有这一切也都准备好了，包装在文档中，有两种语法，我使用 $(function(){})，但这取决于你。您必须使用准备好的文档，以便您的元素在 DOM 中进行查询

让我知道这是否有帮助。

http://jsfiddle.net/UR4H8/

于 2012-11-27T18:23:34.637 回答
1

您的选择器看起来不正确，请尝试：

$('#display input').remove(); // remove all input's under #display
于 2012-11-27T18:23:01.143 回答
1

您可以使用 删除每个孩子empty()。只需在span使用 jQuery选择后调用它

var out = $("#inputBox");
out.empty();
于 2012-11-27T18:23:12.257 回答
1

使用 vanilla JavaScript，您可以removeChild()在添加新元素之前简单地添加。

与 JQuery 一起使用该html()方法，该方法替换现有内容而不是附加它。

于 2012-11-27T18:25:20.407 回答