地址:http://www.xwqy.com/news_detail.jsp?id=90
先看基本的操作代码:
1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}
3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
其实我当初目的是要做个类似股票查询的那种查询方式的,根据你输入的数据,检索数据库,并将匹配的数据在SELECT中罗列出来,因为数据库中有大量的并且单条记录很复杂的数据,每次操作这些数据都要完全输入的话,会造成很的工作量,比如某个产品系统,它的类别有上千上万种,在选择类别的时候,如果将所有的列别放在SELECT中选择的话,用户肯定不愿意,但是,这个类别已经是终极类别了,无法再细分,所以这种选择的方式就被PASS了!见到过股票的那个查询方式,你只要输入股票的前几个字母,系统就会将想匹配的股票全列出来,你输入的越详细,在数据库中的类似数据就越少,那么可供选择的数据就越少越明了,比如:中国招商银行,你输入“中”,那么系统可能会罗列出以“中”开头的“中国银行”,“中国工业银行”,“中国商业银行”等等等等,但当你输入到“中国招”的时候,罗列出来的可能就只有“中国招商银行了”——注:实际的股票查询系统可能是以字母操作的,在此只是举例!
研究了一个早上,呵呵,偶有点苯哈,先将研究结果列出来,供大家参考:
假定已经所有数据放入了str1这个字符串中!
<script language="javascript">
function checkstr(num){
document.form1.CodeList.options.length=0;
if (num!=""){
var str1 = "张三|张三丰二|张三丰|李四|李五|李四书|王二|王三|王六|王小王|王小小王"
var strarray=str1.split( "|");
for(i=0;i<=strarray.length-1;i++){
if (strarray[i].indexOf(num)>=0){
document.form1.CodeList.style.display="";
document.form1.CodeList.options.add(new Option(strarray[i],strarray[i]));
}
}
}
}
</script>
<form name="form1">
<input type="text" name="code" onkeyup="checkstr(this.value)" onblur="this.value=document.form1.CodeList.value"/>
<select name="CodeList" onchange="document.form1.code.value=this.value;"style="display:none;"></select>
</form>
分享到:
相关推荐
如下所示: 代码如下://动态删除select中的所有options: function delAllOptions(){ document.getElementById(“user_dm”).options.length=0;... } // 动态添加select中的项option: function addOneO
javascript 操作表单select的常用步骤,删除,添加,修改 用代码实现,一看就明白理解用法
1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
对原来的select的操作完全没有改变,取值依然是取select的值,设置选中,添加项删除项等等都没有改变。用脚本动态设置select的值时请在后面加上一个change()这样显示的值才会改变。不知道怎么监控脚本对select的值的...
用js操作select的option,可以增加删除和判断value值是否在下拉列表存在
主要介绍了JavaScript实现向select下拉框中添加和删除元素的方法,涉及jQuery中append()与remove()方法动态操作表单元素的相关技巧,需要的朋友可以参考下
javascript动态添加或删除菜单(select)。
SELECT NAME=”aaa” SIZE=”” style=”width:200px” > ””>(空)</OPTION> ”1″>1</OPTION> </SELECT> 代码如下: //获得html控件 var select = document.getElementsByName(“aaa”)[0]; select....
动态删除select中的所有options、某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动! 运行效果图:...
1 检测是否有选中 2.动态创建select 3.添加选项option 4.删除所有选项option 5.删除一个选项option 6.获得选项option的值......
其实这本书一直都在我的电脑里,只是没认真看过。...Select的操作包括动态添加、删除、移动、获取选中项的值、排序等等,现在一一讲述。 1、向Select里添加Option 代码如下://IE only,FF不支持Add方法 fun
给bootstarp下拉多选框进行赋值、清空、清除下拉之前选中的勾---调试页面,发现bootstarp框架多选会自带一个span标签,清空与赋值就是把这个span标签...清除选中的勾$(".selectpicker").selectpicker('deselectAll');