动态添加元素

dynamically add elements

本文关键字：元素 添加 动态      更新时间：2023-09-26

我正在尝试创建元素。现在我可以动态创建一个下拉列表了。但是当我尝试添加新的元素时，它并没有被添加进去

我只写了相关的代码。

<html>
<head>      
    <title>Client Side Programming – Advance Level Assignment</title>
<style>
        #header{
            background-color : #8A2908;
            width : 100%;
            height: 10%;
            text-align : center;
            color : white;
            box-shadow : 0 0 25px #5555FF;
        }
        #nav{
            height: 80%;
            width : 22%;
            background-color : #777;
            background-image : url('wood3.jpg');
            padding-top : 50px;             
            float : left;               
        }           
        #registrationdiv{
            width : 78%;
            height: 75%;                
            font-family : Calibri;
            font-size : 20px;
            border-radius : 2;
            float : left;               
            margin-top : 20px;
        }
        #registrationtable{
            position : relative;
            margin : 18px;
            align : center;
            background-color : #AAA;
            overflow-y : scroll;
            box-shadow : 0 0 17px gray;
            border-radius : 5%;
        }
        #footer{
            background-color : #8A2908;
            width : 100%;
            height: 6%;
            color : white;
            text-align : center;                
            margin : 0px auto 0px auto;
            padding : 2px;
            box-shadow : 0 0 25px #5555FF;
            clear : both;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var elementtocreate = $("#elementtocreate").val();

            $("#elementtocreate").change(function(){
                    if($(this).val()=="select")
                    {
                        $("#itemsrow").show();
                        $("#additemsbtn").show();
                    }
                    else
                    {   
                        $("#itemsrow").hide();
                        $("#additemsbtn").hide();
                    }
            });
            $("#create").click(function(){
                var name = $("#name").val();
                var id = $("#id").val();
                var value = $("#value").val();
                var label = $("#label").val();
                var elementtocreate = $("#elementtocreate").val();                  
                if(elementtocreate=="text")                 
                    $('#registrationform').append(label+'<input type="text" name='+name+"id="+id+"value="+value+">");
                else if(elementtocreate=="password")                    
                    $('#registrationform').append(label+'<input type="password" name='+name+"id="+id+"value="+value+">");
                else if(elementtocreate=="button")  
                {
                    if(value.length=="")
                        $('#registrationform').append('<input type="button" name='+name+"id="+id+"value="+value+">");
                    else
                        $('#registrationform').append('<input type="button" name='+name+"id="+id+" value="+value+">");
                }
                else if(elementtocreate=="checkbox"||elementtocreate=="radio")  
                {
                    if(value.length!="")
                        $('#registrationform').append('<input type='+elementtocreate+' name='+name+"id="+id+">"+value);
                    else
                        $('#registrationform').append(label+'<input type='+elementtocreate+' >');
                }
                else if(elementtocreate=="select")
                {
                    var items = $("#items").val();
                    //alert(items);

                    if(items.length!=""){
                        $('#registrationform').append(label+'<select name='+name+' id='+id+'><option value='+value+'>'+items+'</option></select>');                         
                    }
                    else{                       
                        $('#registrationform').append(label+'<select name='+name+" id="+id+"value="+value+"></select>");                                                        
                    }
                }
            });
            $("#break").click(function(){
                $('#registrationform').append('<br>');
            });
            $("#Gender").hover(function(){                  
                alert("a");
            });
            $("#additemsbtn").click(function(){                 
                var items = $("#items").val();
                var name = $("#name").val();
                var id = $("#id").val();
                var values = $("#value").val();
                var a = '#'+id;
                alert(a);
                //$(a).append(new Option(''+name, ''+value));
//                  $(a).append($('<option>', {'value': values, 'text': items}));
                $("<option></option>", {value: ''+values, text: ''+items}).appendTo(a);
                //$('<option>').val(''+value).text(''+items).appendTo('select');
                //$('#'+id).append("<option value="+value+">"+items+"</option>");               
            });
        });

    </script>
</head>
<body>
    <div id="header">           
        <h1>Dynamic Form Generation</h1>
    </div>
    <div id="nav">
        <center>
            <input type="button" id="break" value="BREAK<br>"></input>
            <input type="button" id="create" value="CREATE"></input>
        </center>
        <table cellspacing="7" id="table" >
            <tr>
                <td><b>ELEMENT : </b></td>
                <td><select id="elementtocreate">
                        <option value='text'>text</option>
                        <option value='radio'>radio</option>
                        <option value='password'>password</option>
                        <option value='checkbox'>checkbox</option>
                        <option value='button'>button</option>
                        <option value='select'>select</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><b>LABEL : </b></td>
                <td>
                    <input type="text" id="label"></input>
                </td>
            </tr>
            <tr>
                <td><b>NAME : </b></td>
                <td>
                    <input type="text" id="name"></input>
                </td>
            </tr>
            <tr>
                <td><b>ID : </b></td>
                <td>
                    <input type="text" id="id"></input>
                </td>
            </tr>   
            <tr>
                <td><b>VALUE : </b></td>
                <td>
                    <input type="text" id="value"></input>
                </td>
            </tr>               
            <tr id='itemsrow' hidden>
                <td><b>ITEMS : </b></td>
                <td>
                    <input type="text" id="items" ></input>
                </td>
            </tr>               
        </table>
        <button id="additemsbtn" value="Add Item" hidden>Add Item</button>
    </div>
    <div id="registrationdiv" >
        <center>        
            <form id="registrationform" >   
            </form> 
        </center>           
    </div>
    <div id="footer"></div>
</body>
</html>

尝试：

var idSelector = "#" + id;
$(idSelector).append($('<option>', {value: value, text: items}));

看看这个答案。

编辑：

这是工作代码片段。将元素添加到.的id不是正确的

尝试使用底部的Add Item按钮添加该选项。我不知道你为什么把它藏起来。

$(document).ready(function(){
  var elementtocreate = $("#elementtocreate").val();
  $("#elementtocreate").change(function(){
    if($(this).val()=="select")
    {
      $("#itemsrow").show();
      $("#additemsbtn").show();
    }
    else
    {   
      $("#itemsrow").hide();
      $("#additemsbtn").hide();
    }
  });
  $("#create").click(function(){
    var name = $("#name").val();
    var id = $("#id").val();
    var value = $("#value").val();
    var label = $("#label").val();
    var elementtocreate = $("#elementtocreate").val();                  
    if(elementtocreate=="text")                 
      $('#registrationform').append(label+'<input type="text" name='+name+"id="+id+"value="+value+">");
    else if(elementtocreate=="password")                    
      $('#registrationform').append(label+'<input type="password" name='+name+"id="+id+"value="+value+">");
    else if(elementtocreate=="button")  
    {
      if(value.length=="")
        $('#registrationform').append('<input type="button" name='+name+"id="+id+"value="+value+">");
      else
        $('#registrationform').append('<input type="button" name='+name+"id="+id+" value="+value+">");
    }
    else if(elementtocreate=="checkbox"||elementtocreate=="radio")  
    {
      if(value.length!="")
        $('#registrationform').append('<input type='+elementtocreate+' name='+name+"id="+id+">"+value);
      else
        $('#registrationform').append(label+'<input type='+elementtocreate+' >');
    }
    else if(elementtocreate=="select")
    {
      var items = $("#items").val();
      //alert(items);
      if(items.length!=""){
        $('#registrationform').append(label+'<select name='+name+' id='+id+'><option value='+value+'>'+items+'</option></select>');                         
      }
      else{                       
        $('#registrationform').append(label+'<select name='+name+" id="+id+"value="+value+"></select>");                                                        
      }
    }
  });
  $("#break").click(function(){
    $('#registrationform').append('<br>');
  });
  $("#Gender").hover(function(){                  
    alert("a");
  });
  $("#additemsbtn").click(function(){                 
    var items = $("#label").val();
    var name = $("#name").val();
    var id = $("#id").val();
    var values = $("#value").val();
    var a = '#elementtocreate'; // CORRECT ID OF THE <SELECT>
    alert(a);
    //$(a).append(new Option(''+name, ''+value));
   
    $(a).append($('<option>', {'value': values, 'text': items}));
    //$("<option></option>", {value: ''+values, text: ''+items}).appendTo(a);
    ////$('<option>').val(''+value).text(''+items).appendTo('select');
    //$('#'+id).append("<option value="+value+">"+items+"</option>");               
  });
});
#header{
  background-color : #8A2908;
  width : 100%;
  height: 10%;
  text-align : center;
  color : white;
  box-shadow : 0 0 25px #5555FF;
}
#nav{
  height: 80%;
  width : 22%;
  background-color : #777;
  background-image : url('wood3.jpg');
  padding-top : 50px;             
  float : left;               
}           
#registrationdiv{
  width : 78%;
  height: 75%;                
  font-family : Calibri;
  font-size : 20px;
  border-radius : 2;
  float : left;               
  margin-top : 20px;
}
#registrationtable{
  position : relative;
  margin : 18px;
  align : center;
  background-color : #AAA;
  overflow-y : scroll;
  box-shadow : 0 0 17px gray;
  border-radius : 5%;
}
#footer{
  background-color : #8A2908;
  width : 100%;
  height: 6%;
  color : white;
  text-align : center;                
  margin : 0px auto 0px auto;
  padding : 2px;
  box-shadow : 0 0 25px #5555FF;
  clear : both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">           
  <h1>Dynamic Form Generation</h1>
</div>
<div id="nav">
  <center>
    <input type="button" id="break" value="BREAK<br>"></input>
  <input type="button" id="create" value="CREATE"></input>
</center>
<table cellspacing="7" id="table" >
  <tr>
    <td><b>ELEMENT : </b></td>
    <td><select id="elementtocreate">
      <option value='text'>text</option>
      <option value='radio'>radio</option>
      <option value='password'>password</option>
      <option value='checkbox'>checkbox</option>
      <option value='button'>button</option>
      <option value='select'>select</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><b>LABEL : </b></td>
    <td>
      <input type="text" id="label"></input>
  </td>
</tr>
<tr>
  <td><b>NAME : </b></td>
  <td>
    <input type="text" id="name"></input>
</td>
</tr>
<tr>
  <td><b>ID : </b></td>
  <td>
    <input type="text" id="id"></input>
</td>
</tr>   
<tr>
  <td><b>VALUE : </b></td>
  <td>
    <input type="text" id="value"></input>
</td>
</tr>               
<tr id='itemsrow' hidden>
  <td><b>ITEMS : </b></td>
  <td>
    <input type="text" id="items" ></input>
</td>
</tr>               
</table>
<button id="additemsbtn" value="Add Item">Add Item</button> <!-- REMOVED 'HIDDEN' -->
</div>
<div id="registrationdiv" >
  <center>        
    <form id="registrationform" >   
    </form> 
  </center>           
</div>
<div id="footer"></div>

相关文章：