首页 > Web开发 > 详细

jquery添加select option两种代码思路比较

时间:2014-03-27 04:12:28      阅读:569      评论:0      收藏:0      [点我收藏+]

功能需求:在客户选择了check_in_date和check_out_date之后,将在check_in_date至check_out_date的promotions中自动添加符合条件的promotion list.默认存在一个promotion,Best Available Rate。

初始的代码:

bubuko.com,布布扣
<select id="promotions_list">
    <option val="0">Best Avaliable Rate</option>
</select>
bubuko.com,布布扣

 

方法一实现代码:

bubuko.com,布布扣
bubuko.com,布布扣
 1 function ajaxPrmotion(){
 2     var check_in_hidden = $(‘#check_in_hidden‘).val();
 3     var check_out_hidden = $(‘#check_out_hidden‘).val();
 4     var adults_num = $(‘#adult‘).attr(‘selected‘,‘selected‘).val();
 5     var child_num  = $(‘#child‘).attr(‘selected‘,‘selected‘).val();
 6     var promotion_opt =‘‘;
 7     $.ajax({
 8         url:"reservation.php?action_type=mobile_ajax&check_in="+check_in_hidden+"&check_out="+check_out_hidden+"&adult="+adults_num+"&child="+child_num+"&upd=1",
 9         type : "get",
10         dataType : "json",
11         async : false, // false 同步
12         success: function(result) {
13             $(‘#promotion_id11‘).find(‘option.after_default‘).remove();//在添加之前确保只有默认的option,所以先将其他的option remove.
14             var length = 0;
15             for(var pro_info in result){
16                 length++;    
17             }
18             if(length>0){
19                 for(var promotion in result){
20                         promotion_opt += ‘<option class="after_default" value="‘ +result[promotion]["room_promotion_id"]+‘">‘+ result[promotion]["title"]+‘</option>‘;    
21                 }
22             }
23         }
24     });
25     if(promotion_opt)$(‘#default_promotion‘).after(promotion_opt);
26 //ajax获得的json数据返回[注意:有对象和数组两种格式],循环遍历拼接在默认的option后面添加上去.
27 
28     }
29     //注:1>中的代码会在返回数据为[]时,执行追加一个<option class="after_default" value="undefined">undefined</option>. 
30     //注:在Chrome F12中的HTML中,选中当前行html,按F2可以直接进入对当前行html代码的编辑状态。
31     
View Code
bubuko.com,布布扣

 

方法二实现代码:

bubuko.com,布布扣
bubuko.com,布布扣
 1 function ajaxPrmotion(){
 2     var check_in_hidden = $(‘#check_in_hidden‘).val();
 3     var check_out_hidden = $(‘#check_out_hidden‘).val();
 4     var adults_num = $(‘#adult‘).attr(‘selected‘,‘selected‘).val();
 5     var child_num  = $(‘#child‘).attr(‘selected‘,‘selected‘).val();
 6     var promotion_opt =‘‘;
 7     var url= "reservation.php?action_type=mobile_ajax&check_in="+check_in_hidden+"&check_out="+check_out_hidden+"&adult="+adults_num+"&child="+child_num+"&upd=1";
 8     
 9     $.ajax({
10         url:url,
11         type : "get",
12         dataType : "json",
13         success: function(result) {
14             $("select[name=promotion_id]").find("option").remove().end().append("<option value=‘0‘>__($lang_text.best_rate)__</option>");//直接将select下面的option全部去掉,然后追加
15             var promotion_opt =‘‘;
16             if (result!=‘‘ && result){
17                 for(var promotion in result){
18                         promotion_opt += ‘<option class="after_default" value="‘ +result[promotion]["room_promotion_id"]+‘">‘+ result[promotion]["title"]+‘</option>‘;    
19                 }
20             }
21             $("select[name=promotion_id]").append(promotion_opt);//再将返回的数据拼接后,追加到select.
22         }
23     });
24 }
View Code
bubuko.com,布布扣

jquery添加select option两种代码思路比较,布布扣,bubuko.com

jquery添加select option两种代码思路比较

原文:http://www.cnblogs.com/shuman/p/3612728.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!