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

以下是效果实现及部分关键代码,相关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. 大整数加法 HDU1002

    今天早上没事干又把这个敲了一遍,虽然手冻得不行,不过又深入理解理解还可以哈. 难点就在给你的整数可能很大很长,所以long long 肯定不行,得用字符串来读取存储,然后注意一下相加的时候进位,最后输 ...

  2. Qt532.QSettings_默认分隔符

    1.http://bbs.csdn.net/topics/391831509?page=1 2楼: QSettings读取配置文件的内容是以逗号作为分隔符,以分号作为结束符.遇到分号就结束了,后面的内 ...

  3. IPC 之 ContentProvider 的使用

    一.概述 ContentProvider 是 Android 中提供的专门用于不同应用间进行数据共享的方式.和 Messenger 一样,ContentProvider 的底层实现同样也是 Binde ...

  4. Asp.net core 学习笔记 ( upload/download files 文件上传与下载 )

    更新 :  2018-01-22  之前漏掉了一个 image 优化, 就是 progressive jpg refer : http://techslides.com/demos/progressi ...

  5. 第 3 章 镜像 - 015 - 调试 Dockerfile

    如何 debug Dockerfile 通过 Dockerfile 构建镜像的过程 从 base 镜像运行一个容器 执行命令对容器做修改 执行类似 docker commit 的操作,生成一个新的镜像 ...

  6. 常见的ORACLE语句

    基本 --新建表: create table table1( id varchar(300) primary key, name varchar(200) not null); --插入数据 inse ...

  7. 雷林鹏分享:XML 树结构

    XML 树结构 XML 文档形成了一种树结构,它从"根部"开始,然后扩展到"枝叶". 一个 XML 文档实例 XML 文档使用简单的具有自我描述性的语法: To ...

  8. English trip V1 - 9.Do you Ever Say Never? 你有没有说永远不会? Teacher:Lamb Key: Adverbs of frequency (频率副词)

    In this lesson you will learn to describe what you do at home. 在本课中,您将学习如何描述您在家中所做的事情. 课上内容(Lesson) ...

  9. android------DDMS files not found: tools\hprof-conv.exe

    好久没有Eclipse了,使用一下就遇到坑,使用eclipse突然发生这个问题:DDMS files not found: ***\sdk\tools\hprof-conv.exe,无法连接模拟器 在 ...

  10. python3—列表

    列表是什么 name = ["jim", "lilei", "lucy"] #方括号表示,逗号分隔 print(name) print(na ...