`
zhouleye
  • 浏览: 6819 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
社区版块
存档分类
最新评论

JS 省、市、区 组合选择器

 
阅读更多
部分代码:
province.js
function Province(){
    var areaArray = new Array();

    this.init = function(xml) {
        var doc = this.loadxml(xml);
        var properties = doc.getElementsByTagName("Province");

        for (var i = 0; i < properties.length; i++) {
            var id = properties[i].getAttribute("ID");
            var name = properties[i].getAttribute("ProvinceName");
            var pid = 0;
            areaArray[i] = [id,name,pid];
        }
    };

    this.loadxml = function(xml) {
        var xmlDoc;
        if (window.ActiveXObject) {
            xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.async = false;
            xmlDoc.load(xml);
        } else if (document.implementation && document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument('', '', null);
            xmlDoc.async = false;
            xmlDoc.load(xml);
        } else {
            return null;
        }
        return xmlDoc;
    };

    this.getNextOption = function(pid, selectName) {
        var options = "";
        for (var i = 0; i < areaArray.length; i++) {
            if (areaArray[i][2] == pid) {
                if (selectName != null || selectName != "") {
                    if (selectName == areaArray[i][1]) {
                        options += "<option value=" + areaArray[i][0] + " selected>" + areaArray[i][1] + "</option>";
                    } else {
                        options += "<option value=" + areaArray[i][0] + ">" + areaArray[i][1] + "</option>";
                    }
                } else {
                    options += "<option value=" + areaArray[i][0] + ">" + areaArray[i][1] + "</option>";
                }
            }
        }
        return options;
    };
}


proince.xml
<?xml version="1.0" encoding="utf-8"?>
<Provinces>
  <Province ID="1" ProvinceName="北京市">北京市</Province>
  <Province ID="2" ProvinceName="天津市">天津市</Province>
  <Province ID="3" ProvinceName="河北省">河北省</Province>
  <Province ID="4" ProvinceName="山西省">山西省</Province>
  <Province ID="5" ProvinceName="内蒙古自治区">内蒙古自治区</Province>
  <Province ID="6" ProvinceName="辽宁省">辽宁省</Province>
  <Province ID="7" ProvinceName="吉林省">吉林省</Province>
  <Province ID="8" ProvinceName="黑龙江省">黑龙江省</Province>
  <Province ID="9" ProvinceName="上海市">上海市</Province>
  <Province ID="10" ProvinceName="江苏省">江苏省</Province>
  <Province ID="11" ProvinceName="浙江省">浙江省</Province>
  <Province ID="12" ProvinceName="安徽省">安徽省</Province>
  <Province ID="13" ProvinceName="福建省">福建省</Province>
  <Province ID="14" ProvinceName="江西省">江西省</Province>
  <Province ID="15" ProvinceName="山东省">山东省</Province>
  <Province ID="16" ProvinceName="河南省">河南省</Province>
  <Province ID="17" ProvinceName="湖北省">湖北省</Province>
  <Province ID="18" ProvinceName="湖南省">湖南省</Province>
  <Province ID="19" ProvinceName="广东省">广东省</Province>
  <Province ID="20" ProvinceName="广西壮族自治区">广西壮族自治区</Province>
  <Province ID="21" ProvinceName="海南省">海南省</Province>
  <Province ID="22" ProvinceName="重庆市">重庆市</Province>
  <Province ID="23" ProvinceName="四川省">四川省</Province>
  <Province ID="24" ProvinceName="贵州省">贵州省</Province>
  <Province ID="25" ProvinceName="云南省">云南省</Province>
  <Province ID="26" ProvinceName="西藏自治区">西藏自治区</Province>
  <Province ID="27" ProvinceName="陕西省">陕西省</Province>
  <Province ID="28" ProvinceName="甘肃省">甘肃省</Province>
  <Province ID="29" ProvinceName="青海省">青海省</Province>
  <Province ID="30" ProvinceName="宁夏回族自治区">宁夏回族自治区</Province>
  <Province ID="31" ProvinceName="新疆维吾尔自治区">新疆维吾尔自治区</Province>
  <Province ID="32" ProvinceName="香港特别行政区">香港特别行政区</Province>
  <Province ID="33" ProvinceName="澳门特别行政区">澳门特别行政区</Province>
  <Province ID="34" ProvinceName="台湾省">台湾省</Province>
</Provinces>
  • PCD.rar (40.5 KB)
  • 下载次数: 124
分享到:
评论

相关推荐

    颜色选择器 js js颜色选择器

    在JavaScript(JS)中实现颜色选择器,可以提供用户友好的交互体验,使得网页设计更加灵活且个性化。本文将详细介绍JavaScript颜色选择器的相关知识点,并探讨如何实现一个基本的颜色选择器。 ### 1. 颜色表示 在...

    7个实用的js日期选择器

    - Moment.js是JavaScript中广泛使用的日期处理库,而MomentPicker是基于Moment.js的日期选择器。这个组合提供了一套完整的日期处理和展示解决方案,支持日期格式化、解析、比较等操作,适合需要复杂日期逻辑的项目...

    js仿携程网机票城市选择器代码

    4. **组合选择器**:通过结合多个选择器来选取更精确的元素集合,如`tag.class`、`tag#id`、`tag[attribute]`等。例如,我们可能需要选取所有具有特定类名的`&lt;li&gt;`元素,或者具有特定属性值的元素。 5. **事件监听*...

    Javascript实现的颜色选择器

    实现JavaScript颜色选择器,我们可以利用HTML、CSS和JavaScript的组合。以下是一些关键步骤: **1. HTML结构:** 创建颜色选择器的HTML元素,如`&lt;input type="color"&gt;`(浏览器内置的颜色选择器),或者自定义的...

    react级联选择器/支持多选/单选

    在React.js开发中,"react级联选择器/支持多选/单选"是一个常见的组件需求,用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景,用户可以逐级展开选项,进行单选或多选操作。...

    jQuery选择器全解.

    5. **selector1, selector2,...,selectorN**:组合选择器,可将多个选择器通过逗号分隔合并为一个,共同作用于目标元素,例如`$("#divId,a,.bgRed")`。 #### 四、层次选择器解析 层次选择器用于处理DOM树中元素间...

    JQuery选择器帮助文档

    5. **组合选择器**:使用逗号`,`来组合多个选择器,选取符合任一选择器条件的元素。 - 示例:`$("#divId,a,.bgRed")`会选择ID为`divId`的元素、所有`&lt;a&gt;`元素以及所有类名为`bgRed`的元素。 #### 四、层次选择器 ...

    Js颜色选择器

    JavaScript颜色选择器是一种在网页上实现用户选择颜色的交互组件,它使得用户可以通过图形界面方便地选取所需的颜色,常用于配合输入框展示或编辑颜色值。这种组件在网页设计、前端开发以及各种需要用户定制颜色的...

    非常美观实用的js颜色选择器插件

    3. `js`:同样可能是目录,存放着插件的JavaScript源代码,如`color-picker.js`,实现了颜色选择器的功能逻辑。 在实际使用中,开发者需要将这些文件引入到他们的项目中,通过调用提供的API或者事件监听来集成颜色...

    精确到秒的js日期时间选择器

    在JavaScript中,处理日期和时间是一项常见的任务,尤其是在创建用户界面时,如日期时间选择器。"精确到秒的js日期时间选择器"是一个实用工具,它允许用户以精确到秒的粒度选择日期和时间,这对于需要精确时间的数据...

    jQuery选择器基础知识

    组合选择器 通过逗号(,)我们可以组合多个选择器,一次性选取多个不同的元素集。 ```javascript $("div, span, p") // 选择所有的`&lt;div&gt;`, `&lt;span&gt;`和`&lt;p&gt;`元素 ``` ### 实际应用 jQuery选择器的强大在于其...

    javascript颜色选择器

    JavaScript颜色选择器是一种交互式用户界面组件,常用于网页设计,允许用户在多种颜色中选取他们所需的色彩。这种选择器通常包含一个色板,显示各种颜色,并可能配备其他功能,如输入十六进制颜色代码、调整RGB或HSV...

    jQuery表单选择器源码

    `Sizzle`能够高效地解析和执行CSS选择器,包括处理复杂的组合选择器和属性选择器。在jQuery的源码中,`Sizzle`被引入并集成,使得开发者可以利用其强大的功能。 ### 4. `Sizzle`选择器的实现 `Sizzle`选择器的实现...

    网页颜色选择器

    在实际开发中,网页颜色选择器通常与前端框架(如Bootstrap、Vue.js或React)结合使用,通过JavaScript事件监听来响应用户的颜色选择,并将所选颜色值应用于CSS样式中。开发者可以自定义颜色选择器的外观和行为,以...

    jqurey选择器练习

    首先,jQuery提供了多种基础选择器,如ID选择器(`#id`)、类选择器(`.class`)、元素选择器(`element`)以及组合选择器(如`$("#id .class")`,选取ID为id内所有类为class的元素)。这些基本选择器可以让你快速...

    年月日时分秒选择器.zip

    在创建年月日时分秒选择器时,我们需要为每种时间单位(年、月、日、时、分、秒)创建一个picker,然后将它们组合在一起。 2. **数据绑定**: picker的选项通常需要从数据中获取,我们可以使用uniapp的data属性来...

    jquery样式选择器插件源码demo

    jQuery支持多种类型的选择器,包括基本选择器(如ID选择器、类选择器、标签选择器)、属性选择器、伪类选择器以及组合选择器等。这些选择器可以灵活地帮助我们定位页面中的特定元素,进行操作和样式设置。 该插件的...

    JS原生的强大DOM选择器querySelector.pdf

    如后代选择器(`&gt;`)、类选择器(`.class`)、ID选择器(`#id`)、属性选择器(`[attribute=value]`)、伪类选择器(`:hover`, `:active`等)以及更复杂的组合选择器。 在性能方面,由于`querySelectorAll`返回的是...

    jQuery选择器的一个Bug

    在这个版本中,可能存在一些已知的选择器问题,如某些选择器组合可能导致选择器引擎执行效率低下,或者在某些特殊情况下无法正确匹配元素。 解决这类问题的一种方法是升级到较新的jQuery版本,因为jQuery团队一直在...

Global site tag (gtag.js) - Google Analytics