`
wlh269
  • 浏览: 453059 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

option的动态添加和选中

阅读更多
  
//==========添加option===============//
  var select=document.getElementById("LIST_ID");
  var surl="system.xmlhttp.XMLHTTP.ak?flag=fillCMPList";
  var datas=getServerData(surl,'');//发送请求
  var rows=datas.split("#");
    for(var i=1;i<rows var columns='rows[i].split(",");'
     select option objselect='document.getElementById("LIST_ID");' for i="0;" if>") {        
            objSelect.options[i].selected = true;        
            break;        
        }        
    } 
 // document.getElementById("LIST_ID").setAttribut("readOnly","true");
  //===================================//

//==========js选中下拉框========================//   
  var objSelect=document.getElementById("USER_ID");   
    for (var i = 0; i < objSelect.options.length; i++) {           
       if (objSelect.options[i].value == "${USER_ID}") {           
           objSelect.options[i].selected = true;           
           break;           
       }           
   }    
 //===================================//  


//   排序:向上移动   
  function   Up(){  
     var   sel=document.getElementById("selectCheck");  //获取select
     var   nIndex   =   sel.selectedIndex;   //需要进行操作的select 项的索引
     var   nLen   =   sel.length;   //select 总共项目数
     if   ((nLen<1)||(nIndex==0))   return;   
     if   (nIndex<0)  {   
        alert("请选择一个要移动的已选按钮!");   
        return;   
      }   
     var   sValue=sel.options[nIndex].value;   
     var   sHTML=sel.options[nIndex].innerHTML;   
     sel.options[nIndex].value=sel.options[nIndex-1].value;   
     sel.options[nIndex].innerHTML=sel.options[nIndex-1].innerHTML;   
     sel.options[nIndex-1].value=sValue;   
     sel.options[nIndex-1].innerHTML=sHTML;   
     sel.selectedIndex=nIndex-1;   
  }  
  //   排序:向下移动   
  function   Down() {   
     var   sel=document.getElementById("selectCheck");   
     var   nIndex   =   sel.selectedIndex;   
     var   nLen   =   sel.length;   
     if   ((nLen<1)||(nIndex==nLen-1))   return;   
     if   (nIndex<0)   {   
       alert("请选择一个要移动的已选按钮!");   
       return;   
     }   
     var   sValue=sel.options[nIndex].value;   
     var   sHTML=sel.options[nIndex].innerHTML;   
     sel.options[nIndex].value=sel.options[nIndex+1].value;   
     sel.options[nIndex].innerHTML=sel.options[nIndex+1].innerHTML;   
     sel.options[nIndex+1].value=sValue;   
     sel.options[nIndex+1].innerHTML=sHTML;   
     sel.selectedIndex=nIndex+1;   
   }    
   //移动到最上
   function UpFirst(){
      var   sel=document.getElementById("selectCheck"); 
      var   nIndex   =   sel.selectedIndex;  
      var   nLen = sel.options.length;
      if   ((nLen<1)||(nIndex==0))   return;   
      
      if(nIndex<0){
          alert("请选择一个要移动的已选按钮!");   
          return; 
      }
      var tempValue = document.getElementById("tempValue");//用于临时存放option的值
      tempValue.value = "";
      for(var k=0;k<nIndex;k++){
         tempValue.value +=  sel.options[k].value+";";
      }
      var arrValue = tempValue.value.split(';');
      var   sValue=sel.options[nIndex].value;   
      var   sHTML=sel.options[nIndex].innerHTML;   
      sel.options[0].value = sValue;
      sel.options[0].innerHTML = sHTML;
    
     for(var j=1;j<=nIndex;j++){
       sel.options[j].value = arrValue[j-1];
       sel.options[j].innerHTML = arrValue[j-1];
     }
      sel.selectedIndex = 0;
   }
   //移动到最后
   function DownLast(){
      var   sel=document.getElementById("selectCheck"); 
      var   nIndex   =   sel.selectedIndex;  
      var   nLen = sel.options.length;
      if   ((nLen<1)||(nIndex==nLen))   return;   
      
      if(nIndex<0){
          alert("请选择一个要移动的已选按钮!");   
          return; 
      }
      var tempValue = document.getElementById("tempValue");//用于临时存放option的值
      tempValue.value = "";
      for(var k=nIndex+1;k<nLen;k++){
         tempValue.value +=  sel.options[k].text+";";
      }
      var arrValue = tempValue.value.split(';');
      var   sValue=sel.options[nIndex].value;   
      var   sHTML=sel.options[nIndex].innerHTML;   
     
    
     for(var j=nIndex;j<nLen;j++){
       sel.options[j].value = arrValue[j-nIndex ];
       sel.options[j].innerHTML = arrValue[j-nIndex];
     }
     
      sel.options[nLen-1].value = sValue;
      sel.options[nLen-1].innerHTML = sHTML;
      sel.selectedIndex = nLen-1;
   }
1
0
分享到:
评论

相关推荐

    select将选中的option设置为默认选项

    首先,我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本用法。`&lt;select&gt;`元素包含一个或多个`&lt;option&gt;`,用户可以在这些选项中进行选择。例如: ```html &lt;option value="1"&gt;Option 1&lt;/option&gt; &lt;option value="2"&gt;...

    select option带自定义图片

    然而,原生的`&lt;option&gt;`元素并不支持直接添加图片,但通过一些JavaScript和CSS的技巧,我们可以实现自定义带有图片的`&lt;option&gt;`效果。以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 ...

    option的value比较来确定select默认选中项

    下面将详细介绍如何通过`option的value`比较来确定`select`的默认选中项,并结合HTML和JavaScript的相关知识进行深入探讨。 1. HTML基础 在HTML中,`&lt;select&gt;`元素创建一个下拉列表,通过`&lt;option&gt;`标签添加选项。...

    动态给select添加option失败的问题原因及解决

    做作业的时候需要给给一个select标签动态添加option,但却总是不成功,刚开始我是这样写的: $(#day).options.append(new Option(i,i)); 然后发现并没有变化,查资料后才发现,如果要用jQuery给select标签动态添加...

    echarts元素选中事件添加demo

    在本文中,我们将深入探讨如何在ECharts 3.6.5版本中添加元素选中事件,以便在饼图、柱状图以及其他图形,包括X轴和Y轴上实现交互功能。ECharts是一款由百度开发的开源JavaScript可视化库,它提供了丰富的图表类型和...

    jquery获得select option值

    这里使用了`option:selected`选择器来选取当前被选中的`&lt;option&gt;`元素,并通过`.text()`获取其文本内容。 2. **设置默认选中的下拉项**: ```javascript $('#select_id')[0].selectedIndex = 1; ``` 通过直接...

    checkbox多项选中及取消选中

    用户可以同时选中 "Option 1" 和 "Option 2"。 3. **JavaScript操作Checkbox**: 使用JavaScript,我们可以动态地改变 `checkbox` 的状态。例如,通过 `document.getElementById('option1').checked = true` 可以...

    动态添加RadioGroup的RadioButton.rar

    理解这些基本概念和方法后,你就可以在实际项目中灵活地运用动态添加`RadioButton`的功能,满足各种界面需求。这个`动态添加RadioGroup的RadioButton.rar`文件可能包含了相关的示例代码,供开发者参考学习。通过阅读...

    js 操作select和option

    // 替换选中 option 的文本和值 obj.options[index] = new Option("New Text", "New Value"); } ``` 通过重新赋值的方式修改已存在的 `&lt;option&gt;` 的文本和值。 #### 8. 删除 Select 控件 ```javascript ...

    JS实现select选中option触发事件操作示例

    在该函数中,我们通过`getElementById`获取`&lt;select&gt;`元素,然后使用`options`属性和`selectedIndex`属性来获取当前选中的`&lt;option&gt;`。最后,我们可以访问选中`&lt;option&gt;`的自定义属性,如`grade`,并弹出警告框显示...

    使用js对select动态添加和删除OPTION示例代码

    在这个场景中,我们关注的是如何使用JavaScript来动态地添加和删除`&lt;select&gt;`元素中的`&lt;option&gt;`选项。`&lt;select&gt;`元素通常用于创建下拉列表,而`&lt;option&gt;`则代表下拉列表中的可选项。 首先,让我们深入理解提供的...

    JS & JQuery 动态添加 select option

    本文将详细介绍如何使用JavaScript(JS)和jQuery两种方式来实现`&lt;select&gt;`元素中的`&lt;option&gt;`选项的动态添加,并探讨它们之间的区别。 ### JavaScript动态添加`&lt;option&gt;` 在纯JavaScript中,我们可以通过`document...

    js动态设置select下拉菜单的默认选中项实例

    在这篇文章中,我们将介绍如何使用JavaScript来动态设置select下拉菜单的默认选中项。这个过程对于Web开发人员来说是非常常见的需求,尤其是在需要根据不同的条件来显示不同的下拉菜单选项时。 首先,我们需要了解...

    Ant design vue中的a-select在动态给option赋值之后,placeholder失效.pdf

    更推荐的方法是利用Ant Design Vue的`label-in-value`属性,它使得`a-select`在选中项时返回包含`value`和`label`的对象,而非单一的值。为了使`placeholder`生效,我们可以使用计算属性来处理`v-model`,确保在未...

    js添加select下默认的option的value和text的方法

    当需要向select元素动态添加选项时,我们可以使用JavaScript来创建option元素,并将其添加到select中。这个过程可以通过原生JavaScript API实现。 2. 原生JavaScript操作DOM来创建option: ```javascript // 假设...

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作...通过以上方法,我们可以非常方便地对 `&lt;select&gt;` 和 `&lt;option&gt;` 进行各种操作,满足网页开发中的各种需求。这些方法不仅能够帮助开发者更好地管理表单数据,还能提高用户体验。

    jQuery模拟Select下拉菜单选中添加代码

    在本文中,我们将深入探讨如何使用jQuery来模拟一个具有选中效果和搜索功能的Select下拉菜单,这在多选场景中非常有用。 首先,我们需要理解原生HTML的`&lt;select&gt;`元素及其`&lt;option&gt;`子元素。`&lt;select&gt;`用于创建一个...

    JS动态添加option和删除option(附实例代码)

    本文详细介绍了如何使用JavaScript动态添加和删除select中的option元素,并提供了实例代码供参考。 知识点一:创建select元素 要动态添加option,首先需要一个select元素。可以通过JavaScript创建一个select元素,...

    页select中如何实现选择option其中一个选项,显示相关的内容

    - 创建一个`&lt;select&gt;`元素,并为其添加多个`&lt;option&gt;`元素,每个`&lt;option&gt;`的`value`属性值对应新闻标题。 - 在页面上创建一个`&lt;div&gt;`元素,用作显示新闻内容的容器。 2. **CSS样式设置**: - 通过CSS将`&lt;div&gt;`...

Global site tag (gtag.js) - Google Analytics