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>
方法一实现代码:
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两种代码思路比较的更多相关文章
- Jquery获取select option动态添加自定义属性值失效
Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...
- jQuery插件主要有两种扩展方式
jQuery插件主要有两种扩展方式: 扩展全局函数方式. 扩展对象方法方式. 扩展全局函数方式 扩展全局函数方式定义的插件,即类级别插件,可以通过jQuery.extend()来进行定义.定义格式为: ...
- JQuery 对 Select option 的操作---转载
<select id="selectID" > <option value="1">1</option> <optio ...
- select into from和insert into select from两种表复制语句区别
select into from和insert into select from两种表复制语句都是将源表source_table的记录插入到目标表target_table,但两句又有区别. 第一句(s ...
- Linux添加系统调用的两种方法
前言 系统调用的基本原理 系统调用其实就是函数调用,只不过调用的是内核态的函数,但是我们知道,用户态是不能随意调用内核态的函数的,所以采用软中断的方式从用户态陷入到内核态.在内核中通过软中断0X80, ...
- 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 ...
- jQuery 实现图片放大两种方式
jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
- 关于MySQL中添加数据的两种方法
下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连 ...
随机推荐
- sdc docker连接
curl -O https://raw.githubusercontent.com/joyent/sdc-docker/master/tools/sdc-docker-setup.sh &&a ...
- Ubuntu下Eclipse热键Ctrl+Alt+Up无效的解决
原文链接 :http://rox.iteye.com/blog/875078 现在好多链接都打不开了, Ubuntu下一直用NetBeans开发,改了热键为Eclipse的,复制行不管用,一直认为是N ...
- maven tomcat7 远程热部署
在maven项目开发中,一般推荐使用jetty进行开发调试.但是在项目发布的时候要求使用tomcat7作为发布服务器,为此在maven中配置了tomcat7插件,以支持项目在外部tomcat7进行远程 ...
- Linux Tomcat重新启动
在Linux系统下,重启Tomcat使用命令操作的! 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看 ...
- java并发:AQS的简单理解
简介: AQS全称 AbstractQueuedSynchronizer,提供了一个基于FIFO(先进先出)队列,可以用于构建锁或者其他相关同步装置的基础框架. ReentrantLock.Semap ...
- 快速排序C++实现
#include<iostream> using namespace std;class quicksort{ public: int quicks(int *a,int low,int ...
- ssh登录忽略known_hosts列表
编辑 ~/.ssh/config 如果不存在,可以先创建,并且要注意其读写权限 mkdir -p ~/.ssh touch ~/.ssh/config ~/.ssh/config 文件内容如下 Log ...
- CMakeList 编写规则 -1
CMAKE 常见指令 CMAKE_MINIMUM_REQUIRED(VERSION 2.8) PROJECT(XXX) SET(CMAKE_BUILD_TYPE Release) SET(CMAKE_ ...
- dataTables常用参数
一.新版本和老版本的区别 新版本的改进:https://datatables.net/new/1.10 新老版本参数变化列表:http://datatables.club/upgrade/1.10-c ...
- vue run dev 8080端口被占用
用vue 官方脚手架vue-cli构建项目容易碰到一些小错误 vue init webpack project-name ...... cd project-name npm install npm ...