js操作select控件

最新推荐文章于 2018-07-12 10:34:07 发布
最新推荐文章于 2018-07-12 10:34:07 发布
阅读量741 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js学习 文章标签： function button input table 测试 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangenli/article/details/4030583
本文介绍使用JavaScript动态创建及操作HTML中的Select控件的方法，包括添加、删除选项及初始化等常见操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1.js可以动态产生select控件:

  语句如下： var se=document.createElement("select");
                    se.id="se_test";
                    se.options.add(new Option("text","value"));
                    document.body.appendChild(se);

2.select控件的添加和删除操作完整的html代码,给大家分享一下

 

 

<html>
<head>
<title>测试操作select</title>
<mce:script type="text/javascript"><!--
      /*
       *数据初始化
       */
    function loadData(){
      //定义常量数组
      var array=new Array();
      array[0]="星期一";
      array[1]="星期二";
      array[2]="星期三";
      array[3]="星期四";
      array[4]="星期五";
      //获取select控件
      var obj=document.getElementById("se_test");
      obj.options.length=0;
      //控件初始化操作，动态添加option
      for(var i=0;i<array.length;i++){
            addOp(obj,array[i],array[i]);
      }
    }
   
    function  addOp(obj,key,value){
          
          var op=new Option(key,value);
          obj.options.add(op);
    }
   
    function addOption(){
   
       var obj=document.getElementById("se_test");
       var key=document.getElementById("tx_name").value;
       var value=document.getElementById("tx_value").value;
       addOp(obj,key,value);
    }
   
    function  delOp(){ 
       var obj=document.getElementById("se_test"); 
       obj.options.remove(obj.selectedindex);
       obj.options.selectedIndex=0;
    }
   
    function truncateOp(){
      var obj=document.getElementById("se_test");
      obj.options.length=0;
    }
   
    function alertSelectItem(){
    var obj=document.getElementById("se_test");
       var ops=obj.options[obj.selectedIndex];
       alert("text="+ops.text+":"+"value="+ops.value);
    }
// --></mce:script>
</head>
<body onload="loadData()">
    <table>
     <tr>
       <td ><label>测试select操作</label></td>
       <td>
        <select id="se_test" name="se_test">
        </select>
       </td>
     </tr>
    </table>
    <table>
     <tr>
      <td><label>名称</label></td>
      <td><input type="text" id="tx_name"></td>
      <td><label>值</label></td>
      <td><input type="text" id="tx_value"></td>
     </tr>
    </table>
   
    <input type="button" onclick="addOption()" value="添加">
    <input type="button" onclick="delOp()" value="删除">
    <input type="button" onclick="loadData()" value="初始化">
    <input type="button" onclick="truncateOp()" value="清空"> 
    <input type="button" onclick="alertSelectItem()" value="显示选中内容"> 
</body>
</html>

[revise] js 数组方法
qq_32265719的博客
11-26 280
js数组用法 sort assii值 var arr = ["George", "John", "Thomas", "James", "Adrew", "Martin"] arr.sort(); js数组用法 reverse reverse() 方法用于颠倒数组中元素的顺序 var arr = ["George", "John", "Thomas", "James", "Adrew...
js操作select控件大全
12-22
js操作select控件大全 js操作select控件大全 js操作select控件大全 js操作select控件大全 js操作select控件大全 js操作select控件大全
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）...
弘毅
12-14 309
Javascript 操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了，再删除时就会出现问题－－问题的关键是for循环是要从大到小，而不是常规的从0到length） // 4.删除select中选中的项 function jsRemo...
js模拟select控件
HELLO WORLD
05-25 1525
思路： 设置一个select容器，把select放在里面并且设置隐藏，放置一个存放选中的文本值，使用ul列表代替option。当列表元素触发click的时候设置对应的option设置选中，并且给select设置value 此次项目select控件是cms生成出来的从前端无法调整样式，所以只能考虑使用js模拟，代码匆忙中完成并未精简，如有更好的方案，还原共同讨论。 具体代码： HTM...
angularJs select选择控件
sinat_29498969的博客
07-12 499
 &lt;select ui-jq="chosen" class="form-control jq-hid" ng-model="reason.PPFR_DelayReasons" &gt; &lt;option ng-repeat="item in userList track by $index" value="{{item.RM_Tid}}" ng-selected="
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
helanye的专栏
07-08 679
1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="pa
js操作select控件的几种方法
10-29
以下是一些关键的JavaScript方法，用于处理select控件： 1. **判断select选项中是否存在Value="paraValue"的Item** 使用`jsSelectIsExitItem`函数，通过遍历select的options数组并检查每个option的value属性，可以...
Javascript操作select控件代码实例
10-15
【JavaScript操作select控件】在Web开发中，`select`元素是HTML中用于创建下拉列表的常见控件。本文将详细介绍如何使用JavaScript来操作这个控件，包括新增、删除、修改、选中和清空选项，以及判断特定选项是否存在...
Javascript 操作select控件大全
09-11
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等
Javascript 操作select控件
赠人玫瑰,手留余香.
10-12 783
1.判断select选项中 是否存在Value="paraValue"的Item         function jsSelectIsExitItem(objSelect, objItemValue) {             var isExit = false;             for (var i = 0; i         if (objSelect.opt
select 控件操作大全
12-15
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等） JavaScript 1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="paraValue"的Item为选中 8得到select的当前选中项的value 9得到select的当前选中项的text 10得到select的当前选中项的Index 11清空select的项
JS模拟select下拉框控件.可当作下拉菜单来用
05-12
摘要:脚本资源,Ajax/JavaScript,select控件,下拉框美化　　Js模拟select控件，实际上可以当作下拉框来用，制作的精美漂亮，我喜欢，相信大家也会喜欢的，稍加修改，就可以变为一个漂亮的下拉菜单啦。
JS中六种数据类型（一）——undefined
weixin_33785108的博客
04-06 317
JS中有6种数据类型：Undefined、Null、Boolean、Number、String和Object。JS中不支持任何创建自定义类型的机制，而所有值最终都将是这6种数据类型。其数据类型的动态性特点足以表示所有数据。（typeof返回的是字符串有六种可能:"number","string","boolean","object","function","undef...
js中遍历数组对象的几种方式
benben0729的专栏
07-07 1万+
第一种：最直接明了的方法for（var i=0;i&lt;arr.length;i++）    //TODO Something第二种：使用for...infor (var item in arr)    //TODO Something第三种：    使用for ...of 这个需要ES6支持for (let item of arr)    //TODO Something...
几种js操作select控件的方法
weixin_30758821的博客
05-21 162
1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置...
javascript 操作select
wckjlu的专栏
10-13 307
js 代码 // 1.判断select选项中 是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.options.l...
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）(转)...
07-16 267
<script type="text/javascript"> // 1.判断select选项中 是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; ...
html代码生成器
热门推荐
清风的专栏
03-31 2万+
自己编写html代码生成器，仅做参考，功能很简单   HTML生成器            var x=0;       var y=0;         /*         *初始化html代码         */        function loadData(){         //换行符          var newline="/r/n";           var ob
JavaScript操作select控件全攻略
"这篇文档是关于JavaScript操作HTML中select控件的一个大全，涵盖了从检查某个选项是否存在、添加新选项、删除选项、选中特定选项、修改选项文本、获取当前选中项的属性到清空所有选项的各种操作。文档提供了一系列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值