0

こんにちは私はJavascriptを初めて使用します...ユーザーがオプションを選択したときに、入力テキストボックスのリストを作成しようとしています。ただし、ユーザーがオプションを変更すると、前の入力テキストボックスの横に入力テキストボックスが作成されます。したがって、ユーザーがオプションを継続的に変更すると、100個の入力ボックスが存在する可能性があります。プログラムでスパン内のすべてを削除し、入力テキストボックスのリストを生成したいと思います。何か提案をお願いします！

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が削除され、アクセスできなくなるため、表示を削除したくありません。だから私は入力ボックスで空を使用しました。

$input.empty();

これはすべて、ドキュメントのラッパーにも対応しています。これには2つの構文があります。私は、$（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()。spanjQueryでを選択した後に呼び出すだけです

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

removeChild()バニラJavaScriptを使用すると、新しい要素を追加する前に簡単に追加できます。

JQueryではhtml()、既存のコンテンツを追加するのではなく置き換えるメソッドを使用します。

于 2012-11-27T18:25:20.407 に答える