select示例:

<select id="sel">
<option value="1">one</option>
<option value="2">two</option>
</select>

js操作

var objSelect = document.getElementById("sel");

一,获取

// 1.获取选中项的value
console.log(objSelect.value);
// 2.获取选中项的index
console.log(objSelect.selectedIndex);
// 3.获取选中项的text
console.log(objSelect.options[objSelect.selectedIndex].text);
// 4.获取选项数量
console.log(objSelect.options.length);

二,选中

// 1.选中某个value的选项
objSelect.value = 2;
// 2.选中某个index的选项
objSelect.options[1].selected = true;

三,增加

// 1.在最后加入选项objSelect.options.add(new Option("three", "3"));

四,修改

// 四,修改
// objSelect.options[i] 获取index为i的元素选项
// 1.修改选中项的value和text
objSelect.options[objSelect.selectedIndex] = new Option("four", "4");
// 2.修改选中项的value
objSelect.options[objSelect.selectedIndex].value = "new1";
// 3.修改选中项的text
objSelect.options[objSelect.selectedIndex].text = "new-one";

五,删除

// 两种删除方式
//objSelect.options[i] = null; // i为index
//objSelect.options.remove(i);
// 1.删除选中项
objSelect.options.remove(objSelect.selectedIndex);
// 2.删除所有项
objSelect.options.length = 0;

jquery操作

var $select = $("#sel");

一,获取

// 1.获取选中项的value
console.log($select.val());
// 2.获取选中项的index
console.log($select.get(0).selectedIndex);
// 3.获取选中项的text
console.log($select.find("option:selected").text()); // 不推荐
// 4.获取选项数量
console.log($select.find("option").length);
// 5.获取选项最大的index属性值
console.log($select.find("option:last").get(0).index); //不推荐

二,选中

// 1.选中某个value的选项
$select.val(2);
// 2.选中某个index的选项
$select.get(0).selectedIndex = 1;
// 3.选中某个text的选项
$select.find("option:contains('two')").attr("selected", true); // .attr("selected", "selected")也可以
//$select.find("option[text='two']").attr("selected", "selected"); //× 这种写法是错误的

三,增加

// 1.在最后加入选项
$select.append("<option value='3'>three</option>");
// 2.在最前加入选项
$select.prepend("<option value='0'>zero</option>");

四,修改

// $select.find("option").get(i) // 获取index为i的元素选项
// 1.修改选中项的value
$select.find("option").get(0).value = "new1";
// 2.修改选中项的text
$select.find("option").get(0).text = "new-one";

五,删除

//$select.find("option").get(i).remove() // i为index
// 1.删除选中项
$select.find("option").get(0).remove(); // index为0是选中项
objSelect.options.remove(objSelect.selectedIndex);
// 2.删除所有项
$select.find("option").remove();
// 3.删除第一项,最后一项
$select.find("option:first").remove();
$select.find("option:last").remove();
// 4.删除某value的项
$select.find("option[value=1]").remove();

最后: 更为复杂的取赋值需要用到遍历.

js jquery select 操作 获取值,选中选项,增加,修改,删除的更多相关文章

  1. 修改input的text 通过jquery的html获取值 未变化

    修改input的text 通过jquery的html获取值 未变化扩展一个方法 ,通过formhtml()来取代html() (function ($) { var oldHTML = $.fn.ht ...

  2. jQuery属性操作之值操作

    值操作是对DOM属性value进行读取和设置操作. 比如html(). text(). val(). 1. html 1. 1 html()获取值 返回值:String 描述:获取集合中第一个匹配元素 ...

  3. jquery select操作大全

    添加option $("#ID option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }) ...

  4. jQuery select操作控制方法小结

    需要注意的是,这里的代码好多是针对jquery 1.32以前的版本(以后的版本已经不支持@),所以替换为空测试下即可. jQuery获取Select选择的Text和Value: 语法解释: 1. $( ...

  5. jQuery Select操作大集合

    jQuery获取Select选择的Text和Value: 语法解释:  $("#select_id").change(function(){//code...});    //为S ...

  6. jQuery select 操作全集

    添加option $('#id').append("<option value="value">Text</option>");//为s ...

  7. jquery select操作和联动操作

    (function(){ //select操作 $.fn.loadSelect = function(opt){ opt = $.extend({}, { required:false,//为真则添加 ...

  8. jQuery通过name获取值

    使用jQuery获取name="day"的input对象: 方法1 var dayObj=$('input[name="day"]'); for(int i=0 ...

  9. jquery和bootstrap获取checkbox选中的多行数据

    在项目中,经常遇到,于是整理 引用bootstrap的js和css 代码解释: $("#dgFlowList").find(":checkbox:checked" ...

随机推荐

  1. Vue实例:演示input 和 textarea 元素中使用 v-model 实现双向数据绑定

    最终效果: 主要代码: <template> <div> <p>input 元素:</p> <input v-model="messag ...

  2. jQuery ajax解析xml文件demo

    解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...

  3. 利用 Docker 搭建单机的 Cloudera CDH 以及使用实践

    想用 CDH 大礼包,于是先在 Mac 上和 Centos7.4 上分别搞个了单机的测试用.其实操作的流和使用到的命令差不多就一并说了: 首先前往官方下载包: https://www.cloudera ...

  4. awk骚操作

    一.awk自加 [root@168web3 ~]# head /data/logs/cloud_monitor_rds_cpu.log |awk '{sum+=$NF}END{print sum}' ...

  5. 老男孩python学习自修第七天【包与模块】

    1.如何导入 from package import module module.function() 常用魔术方法 __init__.py 如果某个文件夹下面有该文件,则该文件夹是一个包,否则只是一 ...

  6. delphi 中出现dataset not in edit or insert mode的问题

    self.ADOQuery2.Edit;self.ADOQuery2.First;while not self.ADOQuery2.Eof dobeginself.ADOQuery2.FieldByN ...

  7. Python——POP3邮件协议

    一.POP3协议用于收取邮件 二.POP3协议常用方法 user(login):想服务器发送登录名,并显示服务器的响应,表示服务器正在等待该用户的输入密码 pass_(passwd):在用户使用use ...

  8. MySQL 索引长度和区分度

    首先  索引长度和区分度是相互矛盾的, 索引长度太短,那么区分度就很低,吧索引长度加长,区分度就高,但是索引也是要占内存的,所以我们需要找到一个平衡点: 那么这个平衡点怎么来定? 比如用户表有个字段 ...

  9. WGS84,GCJ02, BD09坐标转换

    public class Gps { private double wgLat; private double wgLon; public Gps(double wgLat, double wgLon ...

  10. 学习 Spring (一) Spring 介绍

    Spring入门篇 学习笔记 Spring 是什么 Spring 是一个轻量级的 IoC (控制反转)和 AOP (面向切面)的容器框架 框架与类库的区别 框架一般是封装了逻辑.高内聚的,类库则是松散 ...