0

私はjavascriptingが本当に初めてです...（私のWebページはjspに基づいています）選択ボックスからオプションが選択されたときに入力ボックスを生成しようとしています...ユーザーが選択ボックスから入力を選択すると、値が送信されます関数 init() を実行し、値に基づいて入力ボックスを生成します...

例:

<option value="IP,OS" name="sysl"><%=sysname%></option>

が選択されています..次に、次のようなものを生成する必要があります

<tr>
<td> Enter IP:</td>
<td><input type="text" id="IP" name="IP"></td>
</tr>
<tr>
<td> Enter OS:</td>
<td><input type="text" id="OS" name="OS"></td>
</tr>

しかし、私のコードは何も生成しません...

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Run Batch Script</title>
    <script type="text/javascript">

    function init() {
        document.getElementById("bname").addEventListener("change", function(){
        var value = document.getElementById("bname").value; // this gives you the selected value.
        var split = value.split;
        var splitsize = split.length;
        for (var j=0; j<splitsize; j++){
            var a = "<input type = 'text' name = '" + split[j] + "' id = '" + split[j] + "'>";
            document.getElementById("inputBox").innerHTML = a;
        }
        // Your code to add the element that you need.

        }
    )};


    </script>
<body>
    <form action="./run?host=<%=host%>&envname=<%=envname%>" method="post" name="batchForm">  
    <table border="0">
    <tr style="font-weight: bold; font-size: 16px;">
        <td>System Name: </td>
    </tr> 


     <tr>
        <td>Select Batch : </td>
        <td><select id="bname" name="bname" onclicke="init()">
       <%
       String src = "";
       String[] temp;
       String loc = root + "\\" + "Temp.txt";
       int c;
       int tempsize;
       String param;
       BufferedReader S = new BufferedReader(new FileReader(loc));
       ArrayList<String> list = new ArrayList<String>();
       while ((src = S.readLine()) != null){
            c = 3;
            param = "";
            temp =src.split(":");
            tempsize =temp.length;
            list.add(temp[0]);
            if ((tempsize >2)){
                int i;
                for (i=2; tempsize>i ; i++){

                    if((temp[i].equals("null"))){
                        param = "";
                    }
                    else if ((i ==2) && (temp[i] != "null")){
                        param = temp[i];
                    }
                    else if ((i > 2)){
                        param = param + "," + temp[i];
                    }
                }
            }
            %>
            <option value="<%=param%>" name="<%=temp[0]%>"><%=temp[0]%></option>
                <%
            }
       BatchS.close();
    %>
            </select></td>
     </tr>
     <div id = "inputBox"></div>

私は何を間違えましたか？

前もって感謝します！

4

1 に答える 1

4

タグのイベント登録について混乱があります。あなたがJavaScriptを初めて使用すると言ったように、イベント登録について説明する価値があると思います。

HTML タグにイベントを登録するには、2 つの方法があります。

  • たとえば、いくつかのonSomething属性を使用します。

<select onclick="myFunction()"/>

  • もう 1 つの方法は、javascript を使用してイベント ハンドラーを登録することです。

document.getElementById("sysinfo").addEventListener("click", function(){...});

どちらも機能します。ただし、最初の例では、ハンドラーはページの読み込み時に自動的に登録されます。2 番目の方法では、ハンドラーを手動で登録する必要があります。

あなたのコードでは、両方を混在させようとしています。

タグイベント登録を使用でき、イベントはonchangeです（Davidが指摘したonselectではありません）。init()または、ページの読み込み時に関数を呼び出す必要があります。これを行う 1 つの方法は、HTML の最後に次のコードを配置して、ページの読み込み時にイベントを登録することです。

 <script type="text/javascript">
 init();
 </script>

要約すると、私は次のようにします：

<script type="text/javascript">
   function writeInputs() {
        alert('writing inputs'); //helps checking if the handler is ok .. comment this when done
        var value = document.getElementById("sysinfo").value; // this gives you the selected value.
        var split = value.split;
        var splitsize = split.length;
        var code = '';
        for (var j=0; j<splitsize; j++){
            var a = "<input type = 'text' name = '" + split[j] + "' id = '" + split[j] + "'>";
            code += a;
        }
        document.getElementById("inputBox").innerHTML = code;
   }
</script>

<select id="sysinfo" name="sysname" onchange="writeInputs()">

javascript は、JB Nizet によって指摘された問題の解決策で既に修正されています。コードをテストしていないため、他の問題がある可能性があります

于 2012-11-26T21:18:27.527 に答える