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

以下是效果实现及部分关键代码,相关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. Tp5.1使用导出Excel

    composer require phpoffice/phpexcel 不管它的警告,都能用的. use PHPExcel; use PHPExcel_IOFactory; public static ...

  2. Missing artifact com.oracle:ojdbc6:jar:10.2.0.4.0问题解决 ojdbc包pom.xml出错

    遇到的问题:ojdbc.jar包出错 原因:因为oracle的ojdbc.jar是收费的,所以maven的中央仓库中没有这个资源,只能通过配置本地库才能加载到项目中去. 解决办法: (前提是安装好了m ...

  3. stop 用法

    1. stop 文档 $(selector).stop(stopAll,goToEnd) stopAll 可选.规定是否停止被选元素的所有加入队列的动画.goToEnd 可选.规定是否允许完成当前的动 ...

  4. d3.select(this)不能用箭头函数

    d3中典型的数据绑定片段 const items = svg.selectAll('g') .data(gdfs,(d)=> d.name); const enter = items.enter ...

  5. AtCoder Grand Contest 027 C ABland Yard

    ABland Yard 思路: 用了类似拓扑排序的方法来判环 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optim ...

  6. Codeforces 444 C - DZY Loves Colors

    C - DZY Loves Colors 思路: 分块,复杂度有点玄学,和普通分块不同的是在这个块被一次染色的时候暴力染整个块. 代码: #pragma GCC optimize(2) #pragma ...

  7. 利用jenkins+git自动执行接口测试代码

    事前准备 部署好jenkins.申请一个码云账号.代码同步至码云 1.在码云上新建一个项目,并把代码同步上去 我设置成了私有项目 2.为项目添加部署公钥 因为是私有项目,所以需要添加一个部署公钥,不然 ...

  8. 雷林鹏分享:C# 封装

    C# 封装 封装 被定义为"把一个或多个项目封闭在一个物理的或者逻辑的包中".在面向对象程序设计方法论中,封装是为了防止对实现细节的访问. 抽象和封装是面向对象程序设计的相关特性. ...

  9. Bulk RNA-Seq转录组学习

    与之对应的是single cell RNA-Seq,后面也会有类似文章. 参考:https://github.com/xuzhougeng/Learn-Bioinformatics/ 作业:RNA-s ...

  10. 一款好用的取色工具TakeColor

    简介:TakeColor,一款还算好用的取色软件,一个很小很简洁的exe文件,无需安装 使用:打开exe文件后,使用“Alt + C” 组合键即可在鼠标悬停的位置上获取到颜色值,可以获取HTML.RG ...