Question

我是javascripting的新手......（我的网页基于jsp）当选择选项框中的选项时，我正在尝试生成输入框... 当用户从选择框中选择任何输入时，它会将值发送到函数init（）并根据值生成输入框...

例如：if

<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>

我做错了什么？

提前致谢！

Answer 1

您的代码的事件注册存在一些混淆。正如你所说，你是javascript的新手，我认为值得对事件注册进行一些解释。

您有两种方法可以在HTML标记中注册某个事件。

使用一些 onSomething 属性，例如：

<select onclick="myFunction()"/>

另一种方法是使用javascript注册事件处理程序：

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

两者都有效。但是，在第一个示例中，处理程序将在页面加载时自动注册。第二种方式，处理程序必须手动注册。

在你的代码中，你试图混合两者。

您可以使用标记事件注册，事件是 onchange （不是David指定的onselect）。或者，您必须在页面加载时调用init()函数。一种方法是将以下代码放在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指出的问题的解决方案得到纠正。我没有测试代码，因此可能存在其他问题

javascript不会创建输入框

1 个答案: