功能需求:在客户选择了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>

方法一实现代码:

 function ajaxPrmotion(){
var check_in_hidden = $('#check_in_hidden').val();
var check_out_hidden = $('#check_out_hidden').val();
var adults_num = $('#adult').attr('selected','selected').val();
var child_num = $('#child').attr('selected','selected').val();
var promotion_opt ='';
$.ajax({
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",
type : "get",
dataType : "json",
async : false, // false 同步
success: function(result) {
$('#promotion_id11').find('option.after_default').remove();//在添加之前确保只有默认的option,所以先将其他的option remove.
var length = 0;
for(var pro_info in result){
length++;
}
if(length>0){
for(var promotion in result){
promotion_opt += '<option class="after_default" value="' +result[promotion]["room_promotion_id"]+'">'+ result[promotion]["title"]+'</option>';
}
}
}
});
if(promotion_opt)$('#default_promotion').after(promotion_opt);
//ajax获得的json数据返回[注意:有对象和数组两种格式],循环遍历拼接在默认的option后面添加上去. }
//注:1>中的代码会在返回数据为[]时,执行追加一个<option class="after_default" value="undefined">undefined</option>.
//注:在Chrome F12中的HTML中,选中当前行html,按F2可以直接进入对当前行html代码的编辑状态。

方法二实现代码:

 function ajaxPrmotion(){
var check_in_hidden = $('#check_in_hidden').val();
var check_out_hidden = $('#check_out_hidden').val();
var adults_num = $('#adult').attr('selected','selected').val();
var child_num = $('#child').attr('selected','selected').val();
var promotion_opt ='';
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"; $.ajax({
url:url,
type : "get",
dataType : "json",
success: function(result) {
$("select[name=promotion_id]").find("option").remove().end().append("<option value='0'>__($lang_text.best_rate)__</option>");//直接将select下面的option全部去掉,然后追加
var promotion_opt ='';
if (result!='' && result){
for(var promotion in result){
promotion_opt += '<option class="after_default" value="' +result[promotion]["room_promotion_id"]+'">'+ result[promotion]["title"]+'</option>';
}
}
$("select[name=promotion_id]").append(promotion_opt);//再将返回的数据拼接后,追加到select.
}
});
}

jquery添加select option两种代码思路比较的更多相关文章

  1. Jquery获取select option动态添加自定义属性值失效

    Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...

  2. jQuery插件主要有两种扩展方式

    jQuery插件主要有两种扩展方式: 扩展全局函数方式. 扩展对象方法方式. 扩展全局函数方式 扩展全局函数方式定义的插件,即类级别插件,可以通过jQuery.extend()来进行定义.定义格式为: ...

  3. JQuery 对 Select option 的操作---转载

    <select id="selectID" > <option value="1">1</option> <optio ...

  4. select into from和insert into select from两种表复制语句区别

    select into from和insert into select from两种表复制语句都是将源表source_table的记录插入到目标表target_table,但两句又有区别. 第一句(s ...

  5. Linux添加系统调用的两种方法

    前言 系统调用的基本原理 系统调用其实就是函数调用,只不过调用的是内核态的函数,但是我们知道,用户态是不能随意调用内核态的函数的,所以采用软中断的方式从用户态陷入到内核态.在内核中通过软中断0X80, ...

  6. oracle数据库【表复制】insert into select from跟create table as select * from 两种表复制语句区别

    create table  as select * from和insert into select from两种表复制语句区别 create table targer_table as select ...

  7. jQuery 实现图片放大两种方式

    jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...

  8. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  9. 关于MySQL中添加数据的两种方法

    下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连 ...

随机推荐

  1. EnumMap实现类

    从名字上看出来,EnumMap是为枚举类服务的,它的key不能为null,在创建它的时候,必须要指定一个枚举类,如: EnumMap enumMap = new EnumMap(Season.clas ...

  2. 基于MSAA的QQ界面信息获取的实现

    主要技术(Microsoft Active Accessibility)讲解: 以下是微软对于此技术的说明 Microsoft Active Accessibility Version 2.0 Pur ...

  3. spotlight

    spotlight - 必应词典 美['spɑt.laɪt]英['spɒt.laɪt] n.聚光灯:聚光灯照亮的地方:聚光灯照明圈:媒体和公众的注意 v.用聚光灯照:突出报道(以使公众注意) 网络射灯 ...

  4. ubuntu系统:插入优盘read-only file system

    http://sharadchhetri.com/2013/12/19/how-to-fix-read-only-usb-pen-drive-in-ubuntu/ To fix USB pen dri ...

  5. struts框架中OGNL表达式的使用之jsp页面获取action中的属性值

    在jsp页面中获取action中的值: 1.写一个action类OgnlAction类: 需要注意的地方: 如果在aciton中直接使用ognl表达式,将值存储的值栈中,是不能通过跳转将值传到jsp页 ...

  6. 什么是adb命令?以及如果高效使用他们?

    接下来 我会为大家讲解 最通俗易懂的adb命令 希望大家能够喜欢...

  7. 启动多个eclipse 时,因为一个另一个启动报错,

    启动多个eclipse 时,因为一个另一个启动报错, 原因: 可能是 有一个 eclipse  中 的 tomcat  配置出错:preference中  tomcat 配置  context dec ...

  8. KBMMW 4.6 正式版发布

    喜大普奔迎新年! Merry Christmas! We are happy to announce the release of kbmMW v. 4.60.00 Professional and ...

  9. Jfinal框架是什么框架?适用于什么项目呢?

    Jfinal框架是什么框架?适用于什么项目呢? jfinal 基于spring MVC研发的框架,操作简单.节省代码,适用于所有web项目.适合中小型项目开发.10分钟写出一个页面的增删改查.目前所在 ...

  10. PHP二个高精确度数字相加减

    1.相加 string bcadd(string left operand, string right operand, int [scale]); 2.相减 string bcsub(string ...