百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> jquery动态添加option项示例
分享文章到:

jquery动态添加option项示例

发布时间:01/15 来源: 浏览: 关键词:
option项与普通的html标签不一样所以才会特别提到关于jquery动态添加option项的方法,下面一起来看几代码实例代码。

基本普及

 代码如下

 $("#select_id").append("<option value='Value'>Text</option>"); 
//为Select追加一个Option(下拉项) 
 
 $("#select_id").prepend("<option value='0'>请选择</option>"); 
//为Select插入一个Option(第一个位置) 
 
 $("#select_id option:last").remove();
 //删除Select中索引值最大Option(最后一个) 
 
 $("#select_id option[index='0']").remove(); 
//删除Select中索引值为0的Option(第一个) 
 
 $("#select_id option[value='3']").remove(); 
//删除Select中Value='3'的Option 
 
 $("#select_id option[text='4']").remove(); 
//删除Select中Text='4'的Option 
 


$("#select_id").change(function(){//code...});  
//为Select添加事件,当选择其中一项时触发 
 
.var checkText=$("#select_id").find("option:selected").text(); 
//获取Select选择的Text 
 
.var checkValue=$("#select_id").val(); 
//获取Select选择的Value 
 
var checkIndex=$("#select_id ").get(0).selectedIndex;
 //获取Select选择的索引值 
 
.var maxIndex=$("#select_id option:last").attr("index"); 
//获取Select最大的索引值 
 


例子

 代码如下

$(document).ready(function() {
 //为获取List对象按钮添加鼠标单击事件
  var departId = $("#departId").val();
  $.getJSON("book!getOperatorList.action?name=" + departId,
    function(data) {
     //清空显示层中的数据
    $("#message").html("");
    //使用jQuery中的each(data,function(){});函数
    //从data.userInfosList获取UserInfo对象放入value之中
    $.each(data.list, function(i, value) {
     $(
       "<option value='" + value.opId + "'>"
         + value.opName + "</option>").appendTo(
       "#selectId");
    });
   });

});

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有5人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板