动态删除、创建select

最新推荐文章于 2023-11-09 09:20:03 发布
最新推荐文章于 2023-11-09 09:20:03 发布
阅读量344 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyyzm4321/article/details/8107268
版权

//创建select

var newOper=document.createElement("<select id='mid_"+j+"' onChange='clickS("+j+")'></select>");

newOper.length=5;//设置长度为5

//赋值

 newOper.options[0] = new Option("11", "dd");

new

//添加新的option

newOper.options.add(new Option(“66”,“66”));

删除option

newOper.options.remove(1);

//设置长度为0

newOper.options.length=0;


var selectI= document.getElementById("mid").selectedIndex;//获得是第几个被选中了
var selectT = document.getElementById("mid").options[selectIndex].text //获得被选中的项目的文本


 

//删除id

if(document.getElementById("mid")){ //判断是否存在
           var nodeS=document.getElementById("mid");
           //因为id本身的对象不能删除自己 ,所以要先通过 nodeS.parentNode得到父节点,然后把本id对象传入进行删除.
           nodeS.parentNode.removeChild(nodeS);         
   }

例

function clickS(i){  
    var TheArray = new Array("class_type","parent_id","class_name","class_path");
    //点击时，判断这个select后面是否已有别的select，有则全部删除
    if(i<TheArray.length-1){
      for(var m=i+1;m<TheArray.length;m++){
        if(document.getElementById("mid_"+m)){
           var nodeS=document.getElementById("mid_"+m);
           //因为id本身的对象不能删除自己 ,所以要先通过 nodeS.parentNode得到父节点,然后把本id对象传入进行删除.
           nodeS.parentNode.removeChild(nodeS);        
        }
      }
    }
    var selectValue=document.getElementById("mid_"+i).value;
   
    //判断是否为最后一个，根据传递的参数从后台读取下一个select存在，存在创建
    if(i<TheArray.length-1){
     var oper = [{
     actionName : "selectN",
     count : 1,
     operationDatas : [{
       selectValue : selectValue,
       dataNow:TheArray[i],
       dataNext:TheArray[i+1]               
     }]
    }];
  var params = com.sinosoft.common.Assistant
            .getParams(
              com.sinosoft.lz.system.user.LoginInfo
                .getUserId(),
              '123', Ext.encode(oper));
  var url = '/'
      + SysParameter.getProjectName()
      + '/ep/umcSelect/UmcSelectService/selectNext';
     com.sinosoft.common.uitls.Request.query(url,params,function(response,options){
          var responseT=Ext.util.JSON.decode(response.responseText);
          
            var array = responseT.ResponseMessage.operations[0].operationDatas;
          if(responseT.ResponseMessage.success==true){       
            var j=i+1;
            addSearch1(j,array);       
          }else{
            alert('木有子项');
          }
      });
    }
   
  }
 
 
    function addSearch1(j,array){
        var newOper=document.createElement("<select id='mid_"+j+"' onChange='clickS("+j+")'></select>");
        newOper.length = array.length;
          for(var k=0;k<array.length;k++){
            newOper.options[k] = new Option(array[k].es.v, array[k].es.v);
          }       
        document.getElementById("dd").insertBefore(newOper);
         
    }
 
</script>
</head>
<body style="overflow-x:hidden; margin:0 auto; padding:0; ">
<div id="dd">
 <select  id="mid_0" onChange="clickS(0)">
  <option value="0">请选择</option>
  <option value="中药">中药</option>
  <option value="西药">西药</option>
  <option value="其他">其他</option>
  <option value="hehe">hehe</option>
 </select>
</div>
</body>
</html>

少年太天真
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript操作Select和Option
博弈
04-02 181
注意:Option中的O是要大写的，不然语法报错 1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.a...
动态创建select-option
龙傲天的博客
01-19 491
方法一： var op = document.createElement("option"); op.text = ""; //显示值 op.value = ""; //value depart.add(op); 方法二： depart.add(new Option("",""));
动态添加option createElement使用
csdt_csdt的专栏
01-25 2073
select.html --> --请选择一门课程-- <!-- var last_select_num = 3;//加入从数据库中查询 //动态添加第一门课程 var myOption = document.
document获取-元素的和创建元素
qx020814的博客
07-23 674
获取到所有标签名为“li”，附上鼠标悬浮和鼠标离开的方法，悬浮变颜色，离开变回原来的样式。获取一个对象，里面有这个对象的属性；点击全选将所有复选框设置为true，再次点击设置为false。其中一个复选框未被选中，全选框不能被选中，记录选中的个数就好了。普通单击复选框时，所有复选框被选中，全选框也要被选中，和id一模一样，不多做结束。......
select 控件操作
Spring 的专栏
09-14 577
1.动态创建selectfunction createSelect(){var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项optionfunction addOption(){//根据i
MyBatis动态创建表的实例代码
08-27
在某些场景下，如日志记录、实时数据分析等，我们可能需要根据特定条件动态创建数据表。本篇文章将探讨如何使用MyBatis实现动态创建表的功能。 首先，我们要理解MyBatis中的动态SQL。动态SQL是MyBatis的一个重要...
JS 通过系统时间限定动态添加 select option的实例代码
10-22
在JavaScript中，动态地向`<select>`元素添加`<option>`是常见的需求，尤其是在创建交互式表单或实现特定功能时。这个实例代码展示了一种根据系统当前时间和条件来决定是否添加特定选项的方法。下面将详细解释这个...
使用js对select动态添加和删除OPTION示例代码
10-27
在这个场景中，我们关注的是如何使用JavaScript来动态地添加和删除`<select>`元素中的`<option>`选项。`<select>`元素通常用于创建下拉列表，而`<option>`则代表下拉列表中的可选项。 首先，让我们深入理解提供的...
JS操作select下拉框动态变动(创建/删除/获取)
12-09
1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement_x(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...
element messagebox 搭配el-select
听见涛声
03-03 2380
element messagebox 搭配el-select 未解决
JavaScript实现select添加option
01-19
JavaScript为select添加option <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>测试文件</title> [removed] [removed] = function(){ //创建select控件 var _select = document.createElement(SELECT); //添加选项 for(var i=1; i<=10; i++){ var _option = new Option(i,i); _select.options.add(_o
HTML中Select的使用详解
热门推荐
xiangsuixinsheng的专栏
11-08 12万+
//oSelect 列表的底部添加了一个新选项 function onload(){ var oOption = document.createElement("OPTION"); oOption.text="Ferrari"; oOption.value="4"; oSelect.add(oOption); } function fnChange(){ oData.value+=
createElement的用法
最新发布
如果相遇，那么你好哦~
11-09 4180
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
<select>标签的使用技巧总结
Rita_jing的博客
04-01 1214
1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option function addOp
element-ui中$msgBox自定义vnode中存在的一些问题
sun_weitao的博客
07-27 633
【代码】element-ui中$msgBox自定义vnode中存在的一些问题。
下拉列表select动态添加option和获取选中的option的值和value
u011498933的专栏
11-03 2万+
分别用两种方法动态添加option： 方法一：JS方法添加 1、创建select标签 var select = documnet.createElement('select'); 2、给select添加id select.setAttribute('id','selectid'); 3、给select添加onchange事件 select.setAttribute('onchange
select 详细原生详细用法
qq315394799的博客
09-22 2026
1.动态创建select function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option function addOption(){ //根据id查找对象， v...
js 操作select和option
y541397839的专栏
12-09 881
<br />1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option function addOption(){ //根据id查找
SELECT * INTO #TempLieZhuanHang创建表失败
06-08
如果已经存在同名的临时表，你需要先删除它然后再次执行创建表的语句。 3. 确认你的数据库是否有足够的空间来创建临时表。如果数据库已经达到了最大容量，你需要扩展数据库的容量或删除一些不必要的数据。 4. 尝试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值