扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1.可以动态添加多个下拉框,可减少下拉框
创新互联建站自2013年起,是专业互联网技术服务公司,拥有项目网站制作、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元岷县做网站,已为上家服务,为岷县各地企业和个人服务,联系电话:18980820575
2.选中第一个下拉框的任意一个值,同时第三个下拉框的值跟着改变,显示对应的数据。
ps:what?光动态添加就足以。。。。赋值还不能直接赋,而是添加下拉时就赋值。。。。。经过百般折磨,头发掉了n根,最终通过巧妙的思路解决了,在此记录下。若对你有所帮助,点赞加关注吧!后续及时更新。
第一个下拉选项显示
选择下拉项,同时加载数据到第三个下拉框
注:在这里直接去掉了第二行的标签
为了获取改变数据的行,试了很久,动态生成的下拉框无法获取到索引,所以才想到了使用id,并且给id后加一个数字
你可以看下jquery的源代码,
animate: function( prop, speed, easing, callback ) {
var empty = jQuery.isEmptyObject( prop ),
optall = jQuery.speed( speed, easing, callback ),
doAnimation = function() {
// Operate on a copy of prop so per-property easing won't be lost
var anim = Animation( this, jQuery.extend( {}, prop ), optall );
// Empty animations, or finishing resolves immediately
if ( empty || jQuery._data( this, "finish" ) ) {
anim.stop( true );
}
};
doAnimation.finish = doAnimation;
return empty || optall.queue === false ?
this.each( doAnimation ) :
this.queue( optall.queue, doAnimation );
}
jQuery.speed = function( speed, easing, fn ) {
var opt = speed typeof speed === "object" ? jQuery.extend( {}, speed ) : {
complete: fn || !fn easing ||
jQuery.isFunction( speed ) speed,
duration: speed,
easing: fn easing || easing !jQuery.isFunction( easing ) easing
};
opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
// normalize opt.queue - true/undefined/null - "fx"
if ( opt.queue == null || opt.queue === true ) {
opt.queue = "fx";
}
// Queueing
opt.old = opt.complete;
opt.complete = function() {
if ( jQuery.isFunction( opt.old ) ) {
opt.old.call( this );
}
if ( opt.queue ) {
jQuery.dequeue( this, opt.queue );
}
};
return opt;
}
用JQ自带的AJAX来动态加载你想要的JS文件
$.getScript("这是你的JS名字.js", function(){
alert("这是JS加载完了成功的回调函数");
});
这是动态加载的JS文件,ajax必须要有环境才能运行
写循环
ul
script
$().ready(function(){
for (var i = 0; i data.length; i++) {
←←←←1←←←
if(data[i].optype=='2'){
document.write("li"+data[i].palletbarcode+"/li");←←←←2←←←
}
}
});
/script
/ul
上面的代码能在ul内自动填充所有下架的托盘条码,并以li表现出来,如果你有别的需要显示出来,只需要在箭头2处添加不同的属性就可以,如果你还有别的条件筛选,只需要在箭头1处添加if块即可。
本文为大家介绍下使用js及jquery实现动态的文件上传操作按钮的添加和删除,具体示例如下,希望对大家有所帮助
javascript实现
代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
titlejquery文件上传/title
script
type="text/javascript"
src="jquery-1.7.2.js"/script
script
type="text/javascript"
var
addMore
=
function()
{
var
div
=
document.getElementById("div2");
var
br
=
document.createElement("br");
var
input
=
document.createElement("input");
var
button
=
document.createElement("input");
input.setAttribute("type",
"file");
button.setAttribute("type",
"button");
button.setAttribute("value",
"Remove");
button.onclick
=
function()
{
div.removeChild(br);
div.removeChild(input);
div.removeChild(button);
}
div.appendChild(br);
div.appendChild(input);
div.appendChild(button);
}
//节点的移动
//$(function(){
//});
/script
/head
body
div
id="div1"
input
type="file"
id="upload"/
input
type="button"
id="btn"
value="more"
onclick="addMore();"/
/div
div
id="div2"/div
/body
/html
jquery实现
代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
titlejquery文件上传/title
titlejquery1/title
script
type="text/javascript"
src="jquery-1.7.2.js"/script
script
type="text/javascript"
/**
var
addMore
=
function()
{
var
div
=
document.getElementById("div2");
var
br
=
document.createElement("br");
var
input
=
document.createElement("input");
var
button
=
document.createElement("input");
input.setAttribute("type",
"file");
button.setAttribute("type",
"button");
button.setAttribute("value",
"Remove");
button.onclick
=
function()
{
div.removeChild(br);
div.removeChild(input);
div.removeChild(button);
}
div.appendChild(br);
div.appendChild(input);
div.appendChild(button);
}**/
//jquery实现文件上传的按钮添加和删除
$(function(){
$("input[type=button]").click(function(){
var
br
=
$("br");
var
input
=
$("input
type='file'/");
var
button
=
$("input
type='button'
value='Remove'/");
$("#div1").append(br).append(input).append(button);
button.click(function()
{
br.remove();
input.remove();
button.remove();
});
});
});
/script
/head
body
div
id="div1"
input
type="file"
id="upload"/
input
type="button"
id="btn"
value="more"
onclick="addMore();"/
/div
div
id="div2"/div
/body
/html
简单的就是往页面上写入script标签,但是考虑一些一些加载成功,回调方法等等,还是很麻烦,可以考虑一些框架比如sea.js,require.js来实现
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流