打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
关于select
参考一下我在csdn这收集的代码,是一个星级大侠的代码,
希望对你有帮助。
问题:
用什么样的方法可以在运行时向listbox中添加item?


解决:

动态增加与删除SELECT的Option

<script>
//   添加选项
function   addOption(pos){
        var   objSelect   =   document.myForm.mySelect;
        //   取得字段值
        var   strName   =   document.myForm.myOptionName.value;
        var   strValue   =   document.myForm.myOptionValue.value;
        //   建立Option对象
        var   objOption   =   new   Option(strName,strValue);
        if   (pos   ==   -1   &   pos   >   objSelect.options.length)  
              objSelect.options[objSelect.options.length]   =   objOption;
        else
              objSelect.add(objOption,   pos);
}
//   删除选项
function   deleteOption(type){
var   objSelect   =   document.myForm.mySelect;
if(objSelect.options.length> 0){
if   (type   ==   true)
objSelect.options[objSelect.selectedIndex]   =   null;
else
objSelect.remove(objSelect.selectedIndex);
}
else
alert( "已经没有选项可以删除了! ")
}
//   显示选项信息
function   showOption(objForm){
        var   objSelect   =   objForm.mySelect;
if(objSelect.options.length> 0){
document.all.myOptionName.value   =   objSelect.options[objSelect.selectedIndex].text;
document.all.myOptionValue.value   =   objSelect.options[objSelect.selectedIndex].value;
}
else
alert( "没有选项可以显示! ")
}
</script>
<form   name= "myForm ">
<select   name= "mySelect ">
<option   value= "value1 "   Selected> HTML </option>
<option   value= "value2 "> JavaScript </option>
<option   value= "value3 "> VBScript </option>
</select>
<input   type= "button "   onclick= "showOption(this.form) "   value= "显示 ">
<input   type= "button "   onclick= "deleteOption(true) "   value= "删除 ">
<input   type= "button "   onclick= "deleteOption(false) "   value= "Remove方法 "> <br> <br>
选项名称   :   <input   type= "text "   name= "myOptionName "   value= "CSS "> <br>
选项的值   :   <input   type= "text "   name= "myOptionValue "   value= "value4 ">
<input   type= "button "   onclick= "addOption(-1) "   value= "添加 ">
<input   type= "button "   onclick= "addOption(0) "   value= "插入 ">
</form>


简单点写就是:

<select   name= "mySelect ">
<option   value= "value1 "   Selected> HTML </option>
<option   value= "value2 "> JavaScript </option>
<option   value= "value3 "> VBScript </option>
</select>
<button   onclick= "document.all.mySelect.add(new   Option( 'CSS ', 'value4 ')) "> Add </button>

对于listbox则为:
var   o=document.createElement( "OPTION ");
o.value=document.all.appId.options[j].value;
o.text=document.all.appId.options[j].text;
document.all.ListID.add(o);
ID为ListBox的ListID

//实现select的联动,另外,此代码也可以做更改,动态的载入select的option的值
<form   name=form1>
<select   name=province   onchange= "cityName(this.value) ">
    <option   value= " "> 请选择省名 </option>
</select>

<select   name=city>
    <option   value= " "> 请选择城名 </option>
</select>
</form>

<script   language=javascript>

var   provinceName   =   [ "浙江 ",   "江苏 ",   "安徽 ",   "江西 "];
var   浙江   =   [ "杭州 ",   "宁波 ",   "温州 ",   "绍兴 ",   "金华 ",   "湖州 "];
var   江苏   =   [ "南京 ",   "苏州 ",   "无锡 ",   "常州 ",   "镇江 ",   "徐州 "];
var   安徽   =   [ "合肥 ",   "翕县 ",   "黄山 ",   "祁门 ",   "休宁 "];
var   江西   =   [ "南昌 ",   "九江 ",   "赣州 ",   "上饶 ",   "新余 ",   "景德镇 "];  


var   cityouterHTML   =   document.form1.city.outerHTML.substr(0,   document.form1.city.outerHTML.length-9);
function   province()
{

      var   e   =   document.form1.province;
      var   s   =   e.outerHTML.substr(0,   e.outerHTML.length-9)   +   "\r\n ";
              for   (var   i=0;   i <provinceName.length;   i++){
              s   +=   " <option   value= ' "+   provinceName[i]   + " '> "+   provinceName[i]   + " </option> \r\n ";}
              s   +=   " </select> ";
              e.outerHTML   =   s;
}     province();
function   cityName(val)
{

      var   e   =   document.form1.city;
      var   s   =   cityouterHTML;
      if   (val   ==   " ")   {s   +=   " </select> ";   e.outerHTML   =   s;   return;}
      var   a   =   eval(val);
      //此句很关键   解释val的javascript代码,并且在解释完之后执行,如果eval在执行的时候有返回值,
      //则a即[result]是必选项.
              for   (var   i=0;   i <a.length;   i++)
              {
                      s   +=   " <option   value= ' "+   a[i]   + " '> "+   a[i]   + " </option> \r\n ";
              }
              s   +=   " </select> ";
              e.outerHTML   =   s;
}
</script>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
html js 清除select里的值,js控制select增删改,选中,清空, 判断控件...
js和jq判断select是否选中、获取select选中的值
HTML中的<select>标签如何设置默认选中的选项
js操作select option
js 操作select下option
JS获取下拉列表(select)选中项的值和文本
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服