我正在尝试创建元素。现在我能够动态创建一个下拉列表。但是当我尝试向它添加新元素时,它没有被添加到其中。
我只写了相关代码。
<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>
答案 0 :(得分:0)
尝试:
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>");
});
});
&#13;
#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;
}
&#13;
<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>
&#13;