js地址多选实现,居住地,户口,职业,行业多选2
需求是根据点击一个按钮 实现动态添加数据,所以每个数据都有一个地址多选,
以下是效果实现及部分关键代码,相关js相关文件在 http://www.cnblogs.com/zhan1995/p/8489744.html
主要逻辑:
点击“添加规则”,出发点击事件 addRuleHTML(),进入 function addRuleHTML(){}方法,添加点击次数个行,
点击“请选择地区”,进入city_func.js里面的jobAreaSelect(index,value)方法,index为行下表,value为改行默认地址为0,
进入jobAreaSelect方法后,根据第一次点击“请选择地区”时的value值为0,清空city_func.js里面的公共数组jobArea_Arr,
如果是第一次进入,就把jobArea_Arr清空,就没有勾选上的地址,如果不是第一次进入,则把value 通过 jobArea_Arr = value .split(",")
赋值给jobArea_Arr ,点击保存时,将选择的市区号保存到对应的行的隐藏到$('#jobAreaID'+index).val().

<input type="button" id="templateName" name="postage.templateName" value="添加规则" onclick="addRuleHTML()" /> // 添加规则
function addRuleHTML(){
var $table1 = $("#table1");
var Index = $(".imgs").length;
$("#ruleName").show();
var trHtml = "<tr class='imgs' id='add_"+ Index +"' >";
trHtml+= "<th > <input type='text' name='postaddList["+Index+"].templateNo' maxlength='9' style='text-align: right;width: 50px;'/></th>";
trHtml+= "<td align='left' colspan='3'>";
trHtml+= " <input type='text' id='postageAdd"+Index+".defaultRulesA' name='postaddList["+Index+"].defaultRulesA' maxlength='9' style='width: 50px !important;'/> ";
trHtml+= " <input type='text' id='postageAdd"+Index+".defaultRulesB' name='postaddList["+Index+"].defaultRulesB' maxlength='150' style='width:50px;'/> ";
trHtml+= " <input type='text' id='postageAdd"+Index+".defaultRulesC' name='postaddList["+Index+"].defaultRulesC' maxlength='9' style='width: 50px !important;' /> ";
trHtml+= " <input type='text' id='postageAdd"+Index+".defaultRulesD' name='postaddList["+Index+"].defaultRulesD' maxlength='9' style='width: 50px !important;' /> ";
trHtml+= " <input id='jobAreaID"+Index+"' type='hidden' name='postaddList["+Index+"].placeTo' value='0' />";
trHtml+= " <input id='btn_jobArea"+Index+"' type='button' value='请选择地区' onclick='jobAreaSelect("+Index+",$(jobAreaID"+Index+").val())' />";
trHtml+= "<a href='javascript:;' class='opt_links deletopt' onclick='javascript:deleteProductImage("+Index+");'>删除</a> </td> </tr></tr>";
$table1.append(trHtml);
} function jobAreaSelect(index,string){
var dragHtml ='<div id="jobAreaAlpha">'; //地区
dragHtml+=' <dl id="jobAreSelected"><dt>已选地点:</dt><dd></dd></dl>';
dragHtml+=' <div id="maincity2"></div>'; //主要城市
dragHtml+=' <div id="allProv2"></div>'; //所有省市
dragHtml+='</div>'; if(string == 0){
jobArea_Arr.splice(0,jobArea_Arr.length); //根据string,判断是否第一次点击添加地址,js清空数组数据
}else{
jobArea_Arr = string.split(",");
} $('#drag_h').html('<b>请选择地区(您最多能选择5项)</b><span onclick="jobArea.confirm('+index+')">确定</span>');
$('#drag_con').html(dragHtml); jobArea.Show();
boxAlpha();
draglayer();
}
var jobArea = {
// 确定
confirm : function(index){
var areaStr='';
for(var i in jobArea_Arr){
areaStr+=','+ja[jobArea_Arr[i]];
}
areaStr=areaStr.substring(1)?areaStr.substring(1):'请选择地区';
$('#btn_jobArea'+index).val(areaStr);
$('#jobAreaID'+index).val(jobArea_Arr); // 点击确定时,保存的省市区号 默认是隐藏的
boxAlpha();
$('#jobAreSelected dd').empty();
}
}
js地址多选实现,居住地,户口,职业,行业多选2的更多相关文章
- html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件
html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)
需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...
- 复选框(checkbox)、多选框
1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据
原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...
- 在EasyUI中统一判断是否有选中行,如果有则将选中行数据传入回调函数
function procossWithSeletedData(func) { var rowData = $("#tbGrid").datagrid("getSelec ...
- 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- C#——DataGridView选中行,在TextBox中显示选中行的内容
C#--DataGridView选中行,在TextBox中显示选中行的内容,在DataGridView的SelectionChanged实践中设置如下代码 private void dataGridV ...
随机推荐
- Oracle(字符函数)
单行函数语法: 语法:funcation_name(列 | 表达式[, 参数1, 参数2]) 单行函数主要分为以下几种: 字符函数:接收数据返回具体的字符信息 数值函数:对数字进行处理,例如:四舍五入 ...
- 在浏览器端用es6,babel+browserify打包
写得最清楚的是这个系列: 一个普通的写网页的人如何过渡到ES6 (一) 感觉比babel官网写得还清楚点. 看完这个才有点理解node原来不只是用来起express后端web server,更主要用途 ...
- d3 data()数据绑定中的key函数
官网https://github.com/d3/d3-selection/blob/master/README.md#selection_data var data = [ {name: " ...
- numpy函数
a=np.array([1,2,3,4,5,6]) a=a.reshape([2,-1]) # -1:表示3,此处将a数组设置为2行3列 a[1,2]=66 # 把a的6改成66 a=np ...
- Yandex.Algorithm 2018, final round
Yandex.Algorithm 2018, final round A Smart Vending B LIS vs. LDS C Eat And Walk D Search Engine E Gu ...
- 牛客国庆集训派对Day3 G Stones
Stones 思路: sg函数打表找规律 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #in ...
- Java操作Kafka
java操作kafka非常的简单,然后kafka也提供了很多缺省值,一般情况下我们不需要修改太多的参数就能使用.下面我贴出代码. pom.xml <dependency> <grou ...
- linux中tar命令(打包、压缩、解压)、zip和unzip、rar多种压缩文件
一.名词解释 打包:将一大堆文件或目录变成一个总的文件[tar命令] 压缩:将一个大的文件通过一些压缩算法变成一个小文件[gzip,bzip2等] Linux中很多压缩程序只能针对一个文件进行压缩,这 ...
- word中的交叉引用
分别使用“交叉引用”依次插入所需应用文献编号范围的第一个和最后一个. 所需引用处出现“[1][3]” 在引用处对两个编号操作:点击鼠标右键-选择“切换域代码”. [1]变为” {REF _Ref4 ...
- ubuntu12.04 安装CAJViewer-ubuntu(待解决)
ubuntu12.04测试通过 1.sudo apt-get install wine 2.unzip CAJViewer-ubuntu12.04版.zip 3.wine CAJVieweru.exe