请问：如何动态创建一个ListBox控件

leetow2006 2018-07-06 04:59:39

我在html中有一个：
《input name="ucust" type="text" id="ucust" onkeyup="getv()"/》
我想在点击getv()时能动态创建一个和上面的input的宽度是一样的ListBox控件，
请问如何写代码？另外：如何动态销毁这个动态控件？

...全文

410 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

ambit_tsai-微信 2018-07-08

打赏
举报

引用 7 楼 leetow2006 的回复:

请问：我在按按钮时，想先执行一段JS代码，然后再跳转到其他文件，比如：
《form id="form1" name="form1" method="post" action="/fjqsl/ord/sltordsale.php"》
想问在action中，能否先执行一段本地文件中的JS代码，然后再跳转到/fjqsl/ord/sltordsale.php？
这个该怎么做呢？



<script>

	// 监听表单提交的onsubmit事件

    document.querySelector('#form1').onsubmit = function () {

        alert(123);

        return false; // 返回false可以阻止提交

    }

</script>

leetow2006 2018-07-08

打赏
举报

请问：我在按按钮时，想先执行一段JS代码，然后再跳转到其他文件，比如：
《form id="form1" name="form1" method="post" action="/fjqsl/ord/sltordsale.php"》
想问在action中，能否先执行一段本地文件中的JS代码，然后再跳转到/fjqsl/ord/sltordsale.php？
这个该怎么做呢？

ambit_tsai-微信 2018-07-08

打赏
举报

script标签要写在form标签后面！！！

leetow2006 2018-07-08

打赏
举报

引用 8 楼 ambit_tsai 的回复:

[quote=引用 7 楼 leetow2006 的回复:]
请问：我在按按钮时，想先执行一段JS代码，然后再跳转到其他文件，比如：
《form id="form1" name="form1" method="post" action="/fjqsl/ord/sltordsale.php"》
想问在action中，能否先执行一段本地文件中的JS代码，然后再跳转到/fjqsl/ord/sltordsale.php？
这个该怎么做呢？



<script>

	// 监听表单提交的onsubmit事件

    document.querySelector('#form1').onsubmit = function () {

        alert(123);

        return false; // 返回false可以阻止提交

    }

</script>

[/quote]
我这样写：
<script>
// 监听表单提交的onsubmit事件
document.querySelector('#form1').onsubmit = function () {
alert(123);
return false; // 返回false可以阻止提交
}
</script>

<body>
<form id="form1" name="form1" method="post" action="/fjqsl/ord/sltordsale.php" >
.....
</body>
可是没有反应，没有弹出123，也没有阻止/fjqsl/ord/sltordsale.php程序的提交。
请问我错在哪了？

leetow2006 2018-07-07

打赏
举报

引用 2 楼 net_lover 的回复:

ListBox控件在html中就是select标签。动态创建的方法参见代码，至于宽度设置样式即可实现
https://blog.csdn.net/qq_21703215/article/details/58599911

有几个问题想请教下：
1、我现在能创建select控件，但是每一次按下都会创建一次，有什么办法能判断如果已经创建，就不要再创建了？
2、我想创建的select控件在：
《input name="ucust" type="text" id="ucust" onkeyup="getv()"/》
的正下方，我这样做不行：
var pcust = document.getElementById("ucust");
var returnbox = document.createElement("select");
returnbox.id = "mySelect";
document.body.appendChild(pcust);
3、这个控件中的选项option，能响应点击事件，请问怎么写？

孟子E章 2018-07-07

打赏
举报

ListBox控件在html中就是select标签。动态创建的方法参见代码，至于宽度设置样式即可实现
https://blog.csdn.net/qq_21703215/article/details/58599911

leetow2006 2018-07-07

打赏
举报

怎么没人回答？自己顶

luckczj 2018-07-07

打赏
举报

luckczj 2018-07-07

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function getv(){
var txt=document.getElementById("ucust");
var kd=txt.offsetWidth;
var div=document.getElementById("cc");
var lst="<select name='lst' size='5' id='lst' style='width:"+kd+"px;'>";
lst+="<option value='1'>v1</option>";
lst+="<option value='2'>v2</option>";
lst+="<option value='3'>v3</option></select>";
if(div.innerHTML!="")
{
div.innerHTML="";
}
else
{
div.innerHTML=lst;
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>
<input type="text" name="ucust" id="ucust" onkeyup="getv()"/>
</p>
<p>
<label for="lst"></label>

</p>
<div id="cc"></div>
</form>
</body>
</html>

ambit_tsai-微信 2018-07-07

打赏
举报

引用 3 楼 leetow2006 的回复:

有几个问题想请教下：
1、我现在能创建select控件，但是每一次按下都会创建一次，有什么办法能判断如果已经创建，就不要再创建了？
2、我想创建的select控件在：
《input name="ucust" type="text" id="ucust" onkeyup="getv()"/》
的正下方，我这样做不行：
var pcust = document.getElementById("ucust");
var returnbox = document.createElement("select");
returnbox.id = "mySelect";
document.body.appendChild(pcust);
3、这个控件中的选项option，能响应点击事件，请问怎么写？



document.body.innerHTML+='<input name="ucust" type="text" id="ucust" onkeyup="getv(this)"/>';



function getv(el){

	console.log(el.offsetWidth);	// input宽度

	

	if(!document.getElementById('select')){  // 判断是否已有select

		var returnbox = document.createElement('select'); 

		returnbox.id = 'mySelect';

		returnbox.onchange = function(){  // 利用select的onchange方法来监听并响应option的选择

			console.log(this.value);  // 将输出123或者456，对其做判断即可

		};

		var option = document.createElement('option');

		option.text = 123;

		option.value = 123;

		returnbox.appendChild(option);  // 将option元素插入select中

		option = document.createElement('option');

		option.text = 456;

		option.value = 456;

		returnbox.appendChild(option);

		document.body.appendChild(returnbox);  // 将select元素插入body中

	}

}