<%@ page language="java" pageEncoding="GBK" %>  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<<html>  
<head>  
<html:base/><title>欢迎</title>  
</head>  
<body>  
<input type="text" id="1">
<input type="text" id="2">
<select id="name" onclick="addOption()"> 
 
</select> 
 
<script> 
 function addOption(){
        var count
        
        var text=document.getElementById("2").value;
         var obj=document.getElementById("name");
         
         obj.add(new Option(text));
         }
 </script>
</body>  
</html>
我想达到的效果是,在前面的input输入框中输入内容,然后利用js函数,点击下拉框,可以再下拉框中显示前面input的输入项,现在问题就出现我每点击一次,内容都会重复添加,求问怎么达到前面输入了什么内容后面点击下拉框就只出现这些内容,且重复点击还是保持不变呢?

解决方案 »

  1.   

    是用for循环,来逐一判断是否重复吗?能稍微给下代码么?谢谢了
      

  2.   

    var change = false;
    document.getElementById("2").onchange = function(){
        change = true;
    }
    function addOption(){
          if(!change){
                return;
          }else{
                change = false;
         }
           
            var count
             
            var text=document.getElementById("2").value;
             var obj=document.getElementById("name");
              
             obj.add(new Option(text));
             }//简单逻辑处理 假定你只是不希望反复触发addOption
      

  3.   

    <%@ page autoFlush="false"  import="java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %>
    <%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" buffer="100kb"%>  
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
    <head>  
    <html:base/><title>欢迎</title>  
    </head>  
    <body>  
    <table><tr><td><input type="text" name="fibreCount" id="fibreCount" value="1"/></td></tr></table>
    <table class="tableStyle" id="fibreunit">
    <tr> 


    <td>编号</td>



    </tr>
    <tr id="FibreRight">

    <td><input type="text" name="Id[0]" ><input id="btnAddRow" class="btn1" 
    onclick="AddStructureRowFibreunit()" type="button" value="+" /></td>
    </tr>

    </table>
    <script language="javascript" type="text/javascript"> 
    //表单操作 
    function AddStructureRowFibreunit() 

    var count=document.getElementById("fibreCount").value;            //实现计数

    count=parseInt(count)+1;                                                       //点击一次+1
    document.getElementById("fibreCount").value=count;
    var obj=document.getElementById("fibreunit"); 
    //var tr= obj.rows["FibreRight"]; 
    count=count-1;
    //alert(tr.rowIndex); 
    //var count=document.getElementById("FibreLeft").getAttribute("rowspan"); 
    //document.getElementById("FibreLeft").setAttribute("rowSpan",parseInt(count)+1); 
    //alert(count);

    //document.getElementById("fibreCount").value=count;
    //插入行 code form www.jb51 .net 
    var tr =obj.insertRow(-1); 
    var trId="trStructure"+tr.rowIndex; 
    tr.setAttribute("id",trId);

    var td0 = tr.insertCell(0); 
    td0.setAttribute("align","center"); 
    td0.innerHTML = "<input type='text' name='Id["+count+"]'><input id='btnDelRow' class='btn1' type='button' value='-' onclick='DelStructureRowfibre(this)'/>";



    function DelStructureRowfibre(o) 

    var count=document.getElementById("fibreCount").value;            //实现丝线表计数

    count=parseInt(count)-1;                                                       //点击一次-1
    document.getElementById("fibreCount").value=count;   //
    var obj=document.getElementById("fibreunit"); 
    o.parentNode.parentNode.parentNode.removeChild(o.parentNode.parentNode);
    //obj.deleteRow(rowIndex); 
    //var count=document.getElementById("FibreLeft").getAttribute("rowspan"); 
    //document.getElementById("FibreLeft").setAttribute("rowSpan",parseInt(count)); //rowSpan 不要写成rowspan,因为在IE6 与IE7下会有问题 
    //alert(count-1);
    //document.getElementById("fibreCount").value=count-1;


    //End 
    </script> 
    下拉框<select id="name" onclick="addOption()"> 
     
    </select> 
     </body>  
    </html>
    求问,前面动态添加行,然后在动态行input里输入值,希望写一个js函数,点击下拉框就能把前面每一行中的值作为下拉框的每一项,求问js中怎么实现呢?非常感谢~
      

  4.   

    <%@ page autoFlush="false"  import="java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %>
    <%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" buffer="100kb"%>  
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
    <head>  
    <html:base/><title>欢迎</title>  
    </head>  
    <body>  
    <table><tr><td><input type="text" name="fibreCount" id="fibreCount" value="1"/></td></tr></table>
    <table class="tableStyle" id="fibreunit">
    <tr> 


    <td>编号</td>



    </tr>
    <tr id="FibreRight">

    <td><input type="text" name="Id[0]" ><input id="btnAddRow" class="btn1" 
    onclick="AddStructureRowFibreunit()" type="button" value="+" /></td>
    </tr>

    </table>
    <script language="javascript" type="text/javascript"> 
    //表单操作 
    function AddStructureRowFibreunit() 

    var count=document.getElementById("fibreCount").value;            //实现计数

    count=parseInt(count)+1;                                                       //点击一次+1
    document.getElementById("fibreCount").value=count;
    var obj=document.getElementById("fibreunit"); 
    //var tr= obj.rows["FibreRight"]; 
    count=count-1;
    //alert(tr.rowIndex); 
    //var count=document.getElementById("FibreLeft").getAttribute("rowspan"); 
    //document.getElementById("FibreLeft").setAttribute("rowSpan",parseInt(count)+1); 
    //alert(count);

    //document.getElementById("fibreCount").value=count;
    //插入行 code form www.jb51 .net 
    var tr =obj.insertRow(-1); 
    var trId="trStructure"+tr.rowIndex; 
    tr.setAttribute("id",trId);

    var td0 = tr.insertCell(0); 
    td0.setAttribute("align","center"); 
    td0.innerHTML = "<input type='text' name='Id["+count+"]'><input id='btnDelRow' class='btn1' type='button' value='-' onclick='DelStructureRowfibre(this)'/>";



    function DelStructureRowfibre(o) 

    var count=document.getElementById("fibreCount").value;            //实现丝线表计数

    count=parseInt(count)-1;                                                       //点击一次-1
    document.getElementById("fibreCount").value=count;   //
    var obj=document.getElementById("fibreunit"); 
    o.parentNode.parentNode.parentNode.removeChild(o.parentNode.parentNode);
    //obj.deleteRow(rowIndex); 
    //var count=document.getElementById("FibreLeft").getAttribute("rowspan"); 
    //document.getElementById("FibreLeft").setAttribute("rowSpan",parseInt(count)); //rowSpan 不要写成rowspan,因为在IE6 与IE7下会有问题 
    //alert(count-1);
    //document.getElementById("fibreCount").value=count-1;


    //End 
    </script> 
    下拉框<select id="name" onclick="addOption()"> 
     
    </select> 
     
    <script> 
     
     var count=document.getElementById("fibreCount").value;
     count=parseInt(count);
     count=count-1;
     var change = false;
    document.getElementById("Id["+count+"]").onchange = function(){
        change = true;
    }
    function addOption(){
          if(!change){
                return;
          }else{
                change = false;
         }
           
            
            var text=document.getElementById("Id["+count+"]").value;
             var obj=document.getElementById("name");
              
             obj.add(new Option(text));
             }
     </script>
    </body>  
    </html>
    按照上面的同学回复的,只能在下拉框中显示第一行输入的内容,但是后面添加多行之后就不能显示了,求解答呀,万分感谢~
      

  5.   

    var selectInnerHtml = obj.innerHTML;
    selectInnerHtml 里包含的是<option></option> 的字符串,
    只要对这个字符串进行截取判断输入框里的值是否存在