JQuery中的select下拉框[通俗易懂]

JQuery中的select下拉框[通俗易懂]<select id="SelectData"><optionvalue="1">dataOne</option&

大家好,又见面了,我是你们的朋友全栈君。

<select id=”SelectData”>

  <option value =”1″>dataOne</option>

  <option value =”2″>dataTwo</option>

  <option value =”3″>dataThree</option>

</select>

一、select下拉框取值与赋值

1、设置value为3的项选中
$(“#SelectData”).val(“3”);

2、设置text为dataTwo的项选中
$(“#SelectData”).find(“option[text=’dataTwo’]”).attr(“selected”,true);

3、获取当前选中项的value
$(“#SelectData”).val();

4、获取当前选中项的text
$(“#SelectData”).find(“option:selected”).text();

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。

<select “SelectDataTwo”>

</select> 

如:$(“#SelectData”).change(function(){

     // 先清空第二个

      $(“#SelectDataTwo”).empty();

     // 实际的应用中,这里的option一般都是用循环生成多个了

      var option = $(“<option>”).val(1).text(“pxx”);

      $(“#SelectDataTwo”).append(option);

});

二、动态给select下拉框添加option

JQuery的方法:

1、先定义一个数组

var data=new Array();

2、然后,给数组data赋值

3、最后把数组的值写入下拉框

for(var j=0;j<data.length;j++){
             $(“#selectId”).append(“<option value='”+data[j]+”‘>”+data[j]+”</option>”);

}

JS的方法:

var = document.getElementById(“SelectData”);

for(var j=0;j<data.length;j++){

//selectid .add(new Option(“文本”,”值”)); //这个只能在IE中有效 
selectid .options.add(new Option(“text”,”value”)); //这个兼容IE与firefox 

}

三、设置select的动态选中

id为select的id,根据content查找对应的下拉列表值,找到之后绑定选中事件。

$(“#SelectData”).find(“option:contains(‘3’)”).attr(“selected”, true);

四、判断在select下拉框中是否存在某个指定值的option元素

SelectData是select的的id
第一种:

(jquery方法):
var res = $(’#SelectData’).find(“option[value=”1″]”);

if (res.length > 0) {

console.log(“存在值”);

}else{
console.log(不存在);
}

 

第二种:

(js方法):

var opts = document.getElementById(‘SelectData’).options;

for(var i=0, n=opts.length; i<n; i++){
if(opts[i].value == “3”){
console.log(“存在值”);
}
}

五、select下拉框值避免重复添加

1、通过id找到select对应的value

var res = $(“#SelectData“).find(“option[value=”4″]”);

2、进行判断

if(res.length>0){

console.log(“不添加”);

}else{

$(“#SelectData“).append(“<option value=”4″>”dataFour“</option>”);

}

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155169.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python anaconda和pycharm的区别_质量度三者关系

    python anaconda和pycharm的区别_质量度三者关系哈喽~大家好呀Python作为深度学习和人工智能学习的热门语言,你们知道Python、Pycharm、Anaconda三者之间的关系吗?学习一门语言,除了学会其简单的语法之外还需要对其进行运行和实现,才能实现和发挥其功能和作用。下面来介绍运行Python代码常用到的工具总结。一.Python、Pycharm、Anaconda关系介绍1.PythonPython是一种跨平台的计算机程序语言。是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。最初被设计用于编写自动…

  • 安卓设备数据转移到ios设备

    安卓设备数据转移到ios设备下载“转移到iOS”,将iPhone和安卓设备插入电源,开启安卓设备的Wi-Fi。安卓设备的数据怎么转移到iPhone设备?点击“从安卓设备转移数据”安卓设备的数据怎么转移到iPhone设备?-在安卓设备上,打开“转移到iOS”应用并轻点“继续”。阅读显示的条款和条件。轻点“同意”以继续,然后轻点“查找代码”屏幕右上角的“下一步”。-在iOS设备上,轻点“从安卓设备转移数据”屏幕…

  • Vue(9)购物车练习

    Vue(9)购物车练习购物车案例经过一系列的学习,我们这里来练习一个购物车的案例**需求:**使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮

  • error lnk 2019_lnk2005错误

    error lnk 2019_lnk2005错误导致LNK2019的常见问题:(1)未链接的对象文件或包含符号定义的库(2)符号声明的拼写不与符号的定义相同(3)使用了函数,但类型或参数数目不匹配函数定义(4)声明但未定义的函数或变量(5) 调用约定是函数声明和函数定义之间的差异(6)符号定义在c文件中,但未使用externC在c++文件中声明(7)符号定义为静态,并随后被外部文件引用(8)未定义类的静态成员(9)生成依赖项仅定义为解决方…

  • springboot线程池的使用和扩展

    springboot线程池的使用和扩展我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行,今天我们就来实战体验这个线程池服务;本文地址:http://blog.csdn.net/boling_cavalry/article/details/79120268实战环境windowns10;jdk1.8;spring

  • 怎么把浏览器ua改成PC就可以了_手机自带浏览器怎么改成电脑版

    怎么把浏览器ua改成PC就可以了_手机自带浏览器怎么改成电脑版第一种方法:修改浏览器的快捷方式右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择“复制”,复制一个图标副本到桌面。右击该副本,选择“属性”,打开相应的对话框,在“目标”文本框的字符后面添加

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号