一、城市菜单
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:vs JQ
作者: 龚紫康
撰写时间:2021年5月8日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- 项目功能:
实现选择省份找到城市;项目组成由一个省份下拉框、城市下拉框;
实现代码:
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 选择省份找到城市