<!doctype HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>jquery dynamically add elements </title>
<script type= "text/page special Effects" src= ". /.. /jslib/jquery/jquery-1.3.2.min.js "></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#xselectop"). Change (function () {
var $xaddelement = $ ("#xaddelement");
var xtext = "<input type= ' text ' name= ' xtest ' value= ' xtext '";
var xselect = "<select name= ' xtest ' ><option value= ' 1 ' >-----</option><option value= ' 1 ' > Text box </option><option value= ' 2 ' > Dropdown box </option></select>;
var opval = This.value;
if ("1" = Opval) {
$xaddelement. empty ();
$xaddelement. Append (Xtext);
else if ("2" = Opval) {
$xaddelement. empty ();
$xaddelement. Append (Xselect);
}
});
});
</script>
<body>
<select id= "Xselectop" >
<option value= "1" >-----</option>
<option value= "1" > Text box </option>
<option value= "2" > Dropdown box </option>
</select>
<div id= "Xaddelement" ></div>
</body>
Detailed description
Two ways to get:
1. When you click the Add button. Take the tables and data directly from behind. Pay the Ajax method below.
2. Save your data in a hidden form and click the Add button to add it to the table by removing the data from the hidden form.
$.ajax ({
Type: "Get",
cache:false,//set Cache to False
url:url//need to process the background page
Beforesend:function (XMLHttpRequest) {
//
Showloading ();
},
Show the success of what you want to do, data is you back to the background submitted by the Textstatus is the status of the two
Values can be renamed such as (A,B)
Success:function (data, textstatus) {
$ (". TB"). HTML (date)
});
},
What you're going to do after that, and the difference between success is this: no matter how successful it is, it will come to this stage.
Complete:function (XMLHttpRequest, Textstatus) {
Hideloading ();
}
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
