js06 省市联动案例

Posted bbs1234

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js06 省市联动案例相关的知识,希望对你有一定的参考价值。

案例6-省市联动
需求:
选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中  ?
技术分析:
数组:
////////////////////////
数组:
  语法:
    new Array();//长度为0
    new Array(size);//指定长度的
    new Array(e1,e2..);//指定元素
非官方
    var arr4=["aa","bb"];  中括号 直接写数据
常用属性:
  length
注意:
  数组是可变的 ?
  数组可以存放任意值
常用方法:(了解)
  存放值:对内容的操作
  pop():弹 最后一个
  push():插入 到最后

  shift():删除第一个
  unshift():插入到首位
打印数组:
  join(分隔符):将数组里的元素按照指定的分隔符打印  默认分隔符 ,,,,
拼接数组:
  concat():连接两个或更多的数组,并返回结果。
对结构的操作:
  sort();排序
  reverse();反转
////////////////////////
步骤分析:
1.省的下拉选 的选项中添加value属性 当成数组的索引 ?


2.初始化市 ?

// 定义二维数组: 市的数组
  var arr = new Array(4);
  arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
  arr[1] = new Array("长春市","吉林市","四平市","通化市");
  arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
  arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");


3.选择省的时候,onchange事件 ?

<select name="pro" onchange="selCity(this.value)">
  <option >-请选择-</option>
  <option value="0">黑龙江</option>
  <option value="1">吉林</option>
  <option value="2">辽宁</option>
  <option value="3">河南</option>
</select>
  <select name="city">
    <option >-请选择-</option>
</select>


4.编写函数, ?

<script>
function selCity(index){
  //alert(index);

    //通过索引获得 市的数值
    var cities=arr[index];

  //获取市的下拉选
    var citySelObj=document.getElementsByName("city")[0];  name返回的是数组元素

  //先初始化  每次选中 对上边的内容清空
    citySelObj.innerHTML="<option >-请选择-</option>";

  //遍历数组 组装成option 追加到select  name 为city 
    for(var i=0;i<cities.length;i++){
    citySelObj.innerhtml+=("<option>"+cities[i]+"</option>");
}
}
</script>


  通过获取的索引获取对象的市的数组 this.value


  遍历数组,将数组里面的每个值组装option 添加到select中即可

//////////////////////////////
引用类型总结:
  原始类型中的String Number Boolean都是伪对象,可以调用相应的方法?
  Array:数组
  String:
语法:
  new String(值|变量);//返回一个对象
  String(值|变量);//返回原始类型
常用方法:
  substring(start,end):[start,end)
  substr(start,size):从索引为指定的值开始向后截取几个

  charAt(index):返回在指定位置的字符。
  indexOf(""):返回字符串所在索引

  replace():替换
  split():切割

常用属性:length
  Boolean:
语法:
  new Boolean(值|变量);
  Boolean(值|变量);
  非0数字   非空字符串""     非空对象   转成true
  Number
语法:
  new Number(值|变量);
  Number(值|变量);
注意:

  null====>0
  fale====>0 true====>1
字符串的数字=====>对应的数字
  其他的NaN
Date:
  new Date();
常用方法:
  toLocalString()
RegExp:正则表达式
语法:
  直接量语法 /正则表达式/参数
  直接量语法 /正则表达式/

  new RegExp("正则表达式")
  new RegExp("正则表达式","参数")
参数:
i:忽略大小写
g:全局
常用方法:
test() :返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)

全局:

decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。

Number():强制转换成数字
String():转成字符串

parseInt():尝试转换成整数
parseFloat():尝试转换成小数

eval() 计算 javascript 字符串,并把它作为脚本代码来执行。


























































































































































以上是关于js06 省市联动案例的主要内容,如果未能解决你的问题,请参考以下文章

中国省市区地址三级联动jQuery插件 案例下载

AJAX案例四:省市联动

Ajax---案例(省市区联动)用到template()模块

JavaWeb——AJAX(附三级联动省市区案例)

省市区三级联动jquery插件 city-picker与百度地图API联动小案例

314 Ajax案例:邮箱地址验证,搜索框输入自动提示,省市区三级联动