需求是根据点击一个按钮 实现动态添加数据,所以每个数据都有一个地址多选,

以下是效果实现及部分关键代码,相关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;'/>&nbsp;&nbsp;&nbsp;";
trHtml+= " <input type='text' id='postageAdd"+Index+".defaultRulesB' name='postaddList["+Index+"].defaultRulesB' maxlength='150' style='width:50px;'/> &nbsp;&nbsp;&nbsp; ";
trHtml+= " <input type='text' id='postageAdd"+Index+".defaultRulesC' name='postaddList["+Index+"].defaultRulesC' maxlength='9' style='width: 50px !important;' />&nbsp;&nbsp;&nbsp;";
trHtml+= " <input type='text' id='postageAdd"+Index+".defaultRulesD' name='postaddList["+Index+"].defaultRulesD' maxlength='9' style='width: 50px !important;' />&nbsp;";
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的更多相关文章

  1. html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

  2. 【jQuery】复选框的全选、反选,推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  3. springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  4. JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)

    需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...

  5. 复选框(checkbox)、多选框

    1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

  6. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  7. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  8. 在EasyUI中统一判断是否有选中行,如果有则将选中行数据传入回调函数

    function procossWithSeletedData(func) { var rowData = $("#tbGrid").datagrid("getSelec ...

  9. 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  10. C#——DataGridView选中行,在TextBox中显示选中行的内容

    C#--DataGridView选中行,在TextBox中显示选中行的内容,在DataGridView的SelectionChanged实践中设置如下代码 private void dataGridV ...

随机推荐

  1. svn的使用教程

    引言:这里只讲解几个svn不常用但是非常有用的使用方法,对于经常使用的不做概述,因为很简单,而且网上都能找到. 1.1 svn历史版本对比已经恢复到指定版本(myeclipse) 在项目中的文件或者文 ...

  2. C# 使用 protobuf 进行对象序列化与反序列化

    protobuf 是 google的一个开源项目,可用于以下两种用途: (1)数据的存储(序列化和反序列化),类似于xml.json等: (2)制作网络通信协议. 源代码下载地址:https://gi ...

  3. Django与缓存

    我们都知道Django建立的是动态网站,正常情况下,每次请求过来都经历了这样一个过程: 接收请求 -> url路由 -> 视图处理 -> 数据库读写 -> 视图处理 -> ...

  4. Java离线人脸识别SDK 支持arcface 2.0 最新版

    虹软人脸识别SDK之Java版,支持SDK 1.1+,以及当前最新版本2.0,滴滴,抓紧上车! JDK SDK Win release license status 前言 由于业务需求,最近跟人脸识别 ...

  5. 雷林鹏分享:现实生活中的 XML

    现实生活中的 XML 如何使用 XML 来交换信息的一些实例. 实例:XML 新闻 XMLNews 是用于交换新闻和其他信息的规范. 对新闻的供求双方来说,通过使用这种标准,可以使各种类型的新闻信息通 ...

  6. 请问WCF 跟 WebService之间的相同跟异同

    https://social.msdn.microsoft.com/Forums/zh-CN/c06420d1-69ba-4aa6-abe5-242e3213b68f/wcf-webservice W ...

  7. LeetCode--020--括号匹配(java版)

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被认 ...

  8. CF1114E Arithmetic Progression

    给定一个打乱的等差数列,每次两种操作. 1.查询一个位置. 2.查询是否有比x大的数字. 一共60次操作. sol: 30次操作即可二分出首项. 剩下30次操作查询出30个位置然后两两做差取gcd即可 ...

  9. windows远程以及文件共享方法总结

    文件共享部分 紧接着下一步[允许使用空密码] 参考这个链接 https://jingyan.baidu.com/article/7f766dafa8c5ee4100e1d071.html 在我们使用w ...

  10. java进行url编码和解码

    public static String getURLEncoderString(String str) { String result = ""; if (null == str ...