2021-05-18

一、城市菜单

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:vs JQ

作者: 龚紫康

撰写时间:2021年5月8日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  1. 项目功能:

实现选择省份找到城市;项目组成由一个省份下拉框、城市下拉框;

实现代码:

     css:   

 

 

 

 

 

 

Select元素是一种表单控件,可用于在表单中接受用户输入。

它支持HTML中的两种属性全局属性、事件属性。在select配合<option>使用

option 元素定义下拉列表中的一个选项(一个条目)。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。

 

 

 

初始效果:图1

                      实现效果:图2

二、代码讲解:

源代码:

通过jq中的change()方法当元素的值发生改变时,会发生change事件。该事件仅

适用于文本域(text field),以及 textarea 和 select 元素。change () 函数触发 change事件,或规定当发生 change事件时运行的函数。

注释:当用于 select 元素时,change事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

再利用If...else if...else 语句选择多个代码执行;

if($(“指定元素”)+方法){

   判断内容

   for循环语句

}

重要代码:

使用remove方法在初始时移除第四个option标签,remove()方法移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove()不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

申明一个数组:

var arr=[

        ['南昌', '九江', '宜春', '萍乡'],

        ['东莞', '汕头', '韶关','深圳'],

        ['长沙', '岳阳','怀化','张家界'],

  ]

最后使用append()方法向选择的元素添加内容:

$(“选择元素”).append(“标签 或 函数”);

当然还可以使用appendTo()方法将内容追加到元素中;

 

$(“标签 或 函数”).appendTo(“选择元素”);

代码效果:图3

 

图3 选择省份找到城市   

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值