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


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

    初始的代码:

    <select id="promotions_list">
        <option val="0">Best Avaliable Rate</option>
    </select>

    方法一实现代码:

     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

    方法二实现代码:

     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
  • 相关阅读:
    SSM框架搭建(二) 创建MAVEN项目
    SSM框架搭建(一) JDK和MAVEN环境搭建
    Sublime Text3 手动 配置 NodeJs 环境
    spring-petclinic性能调优实战(转)
    algs4 使用 DrJava 编写 Hello World on Windows
    系统学习数据结构算法
    Algorithm 学习环境准备
    Gradle构建多模块项目
    使用 Gradle 构建 Java 项目
    Gradle目录结构详解
  • 原文地址:https://www.cnblogs.com/shuman/p/3612728.html
Copyright © 2020-2023  润新知