Jquery 动态增加option及获取值 遍历option相关方法
2017-09-19 14:09
686 查看
data里的数据如下图:
html:
js:
获取select 中选中的值
方法:
遍历option获取所有值
html:
js:
html:
<select id="channel_id" name="channel"> </select>
js:
function getBaseOptionFun(){ $('#channel_id').empty(); $.ajax({ url: "../../ueIndexConfig/getOption.do", type: "POST", data: { province_id:'', channel_id:'' }, async : false, success: function (data) { console.log(data); if(data.all_channel != "" && data.all_channel != null){ for(var i = 0; i < data.all_channel.length; i++){ $("#channel_id").append("<option value='"+data.all_channel[i].channel_id+"'>"+data.all_channel[i].channel_name+"</option>");//新增 } $("#channel_id option:eq(0)").attr('selected', 'selected');//选中第一个 //$("#channel_id").append("<option value=''>请选择</option>"); } }, fail: function (status) { // 此处放失败后执行的代码 } }); }
获取select 中选中的值
方法:
//获取select中值 $("#channel_id option:selected").val(); //获取select中值channel_id $("#channel_id").val(); //获取select中文本channel_name $("#channel_id").text(); //$("#channel_id").find("option:selected").text(); //获取select 中下标值 $("#channel_id").get(0).selectedIndex; //获取select 最大的index属性值 $("#channel_id option:last").attr("index");
//select选中索引有好多方式, $('#someId').find('option:selected').selectedIndex; $('#someId').find('option:selected').attr('selectedIndex'); 这两种方式取不到索引值 $('#someId').prop('selectedIndex'); $('option:selected', '#someId').index(); $('#someId option').index($('#someId option:selected')) //以上三种方式可以取到索引值
遍历option获取所有值
html:
<select id="channel_id" name="channel" datatype="*" nullmsg="请选择渠道"> <option value="1" selected="selected">掌上营业厅</option> <option value="2">网上营业厅</option> <option value="3">微信营业厅</option> <option value="8">能力开放平台</option> </select>
js:
//方法1: $(function(){ var array = new Array(); //定义数组 $("#channel_id option").each(function(){ //遍历所有option var channlVal= $(this).val(); //获取option值 if(channlVal!=''){ array.push(channlVal); //添加到数组中 } }) }) ; //方法2: var channelArr= new Array(); var channel=$("#channel_id").find("option"); for(var i=0;i<channel.length;i++){ var channlVar=channl.eq(i).val();//option中的值 channelArr.push(channlVar);//添加到数组中 }
jQuery添加/删除Select的Option项: 1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
相关文章推荐
- jquery动态添加以及遍历option并获取特定样式名称的option方法
- jquery动态添加以及遍历option并获取特定样式名称的option
- js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)
- jquery动态添加以及遍历option并获取特定样式名称的option
- jquery动态添加以及遍历option并获取特定样式名称的option
- Jquery :动态给Table指定行或尾行插入tr和相关,遍历页面所有控件获取id
- jQuery获取option方法汇总
- jquery 动态增加,减少input表单的方法
- jquery 动态增加,减少input表单的简单方法(必看)
- jQuery——获取option方法汇总
- Jquery遍历select option和添加移除option的实现方法
- 关于jquery中动态增加select,事件无效的快速解决方法
- Jquery遍历checkbox获取选中项value值的方法
- 夺命雷公狗jquery---50获取div元素并且通过each方法遍历
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- jquery动态遍历Json对象的属性和值的方法
- jquery遍历table的tr获取td的值实现方法
- 使用jQuery给Table动态增加行、清空table的方法
- jquery动态添加文本并获取值的方法
- 关于js遍历list集合,获取select选中的值以及动态添加option