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

以下是效果实现及部分关键代码,相关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. MySQL 并发测试中,线程数和数据库连接池的实验

    我一直以来,对性能测试中,连接池的大小要如何配置,不是太清楚: 就我所知道的,就DB自带对连接数的限制,在sqlserver中用select @@connection 可以查到, 在代码中,可以配置D ...

  2. 在vscode中,自定义代码片段,例vue组件的模板

    1---- 2----  输入vue,  选 vue.json 3----  在vue.json中编辑, 有说明 a.  tab符,要用空格, 也可以转义 4----   新建vue文件, 输入自定义 ...

  3. leecode第八十九题(格雷编码)

    class Solution { public: vector<int> grayCode(int n) { vector<int> res; res.push_back(); ...

  4. HDU 1241 连通块问题(DFS入门题)

    Input The input file contains one or more grids. Each grid begins with a line containing m and n, th ...

  5. cocos2dx 如何获得节点的类型

    1. 需求:在所有子节点中得到是ui::Text类型的节点,并对其进行操作. 2. 解决方案:在根节点Node中有一个如下的函数: /** * Gets the description string. ...

  6. 如何解决failed to load the jni shared library问题

    如何解决failed to load the jni shared library问题  首先,我们来查看JDK是多少位的,在搜索框中输入cmd,然后打开命令行窗口.  在命令行中输入java -ve ...

  7. 利用unittest+ddt进行接口测试(二):使用yaml文件管理测试数据

    知道ddt的基本使用方法之后,练习把之前用excel文件来维护的接口测试用例改用unittest+ddt来实现. 这里我选用yaml文件来管理接口参数,开始本来想用json,但是json无法添加注释, ...

  8. 日常英语---十一、MapleStory/Monsters/Level 201-210(Dark Demon Eagle Rider)

    日常英语---十一.MapleStory/Monsters/Level 201-210(Dark Demon Eagle Rider) 一.总结 一句话总结:骑着鹰的快速飞行的恶魔,进入地图后跟着你. ...

  9. maven 把本地jar包打进本地仓库

    maven 把本地jar包打进本地仓库 1.本地有自己写的项目jar包,但是需要用maven依赖对其进行引用: 2.某个jar包在远程仓库没有,导致pom.xml报错,此时可以从网上单独下载此jar包 ...

  10. Entity Framework 6 学习笔记2 — 增、删、改、显示简单代码示例

    前言 通过 “Entity Framework 6 学习笔记1 — 介绍和安装方法”文章我相信大家对EF的安装应该没什么问题了,整体安装还是比较简单的,只需要通过Nuge搜索EF然后安装就可以了,这也 ...