0

我真的是javascripting的新手...（我的网页基于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 标记中注册某些事件。

  • 使用一些onSomething属性，例如：

<select onclick="myFunction()"/>

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

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

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

在您的代码中，您试图将两者混合使用。

您可以使用标记事件注册，并且该事件是onchange（不是大卫指出的 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 指出的问题得到纠正。我没有测试代码，所以可能有其他问题

于 2012-11-26T21:18:27.527 回答