功能需求:在客户选择了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. tensorflow生成随机数的操作 tf.random_normal & tf.random_uniform & tf.truncated_normal & tf.random_shuffle

    tf.random_normal 从正态分布输出随机值. random_normal(shape,mean=0.0,stddev=1.0,dtype=tf.float32,seed=None,name ...

  2. Zookeeper—学习笔记(一)

    1.Zookeeper基本功能 (增 删 改 查:注册,监听) 两点: 1.放数据(少量). 2.监听节点.  注意: Zookeeper中的数据不同于数据库中的数据,没有表,没有记录,没有字段: Z ...

  3. java写简单Excel 首行是目录 然后前台下载

    页面: <form action="${path}/xxx/xxx.do" method="get" > 表格下载:<input type=& ...

  4. 第八章 高级搜索树 (xa2)红黑树:结构

  5. 如何添加ECSHOP广告位置

    如何添加ECSHOP广告位置 我们都知道ecshop系统默认的广告位置非常的少,但是一个电子商务网站岂能离开广告?庆幸的是,ecshop预留了足够强大的组件让我们能够完全有可能实现任意我们想要广告位置 ...

  6. day7:vcp考试

    Q121. An ESXi 6.x host in the vCenter Server inventory has disconnected due to an All Paths Down (AP ...

  7. mysqlbateis generator 当遇到tinyint 生成转化bool 解决方法

    当遇到tyint 生成转化bool  类型问题很恶心,记录一下解决方法 一. TinyInt转换规则 JAVA数据类型 和 MYSQL的数据类型转换,要注意tinyInt 类型,且存储长度为1的情况. ...

  8. swift textfield 和 textview 实时获取 输入内容

    textfield : func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replac ...

  9. [leetcode]215. Kth Largest Element in an Array 数组中第k大的元素

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  10. 使用 springmvc请求 返回 字符串时 ,中文出现乱码

    @RequestMapping(value="/askQuestion" ,method = RequestMethod.GET , produces = {"appli ...