select标签内动态生成的option添加点击事件

最近在工作中遇到一个小问题,在此记录一下,有碰到类似问题的同学也可以借鉴一下,【大神就请飘过了。。。】

主要要实现的小功能就是点击“中国”所在的select标签时,要让对应的右边输入手机号码的输入框内的区号跟着变化

直接上代码:

首先,是HTML部分

其次,是一组数组,里面存放了很多数据,简单举个例子

var option =[

{

"en": "China",

"zh": "中国",

"locale": "CN",

"code": 86

},

{

"en": "Colombia",

"zh": "哥伦比亚",

"locale": "CO",

"code": 57

}

... ...

                    ]

==============================================================================================

接下来要做的就是解析这组数组中的数据,并把它们动态的添加到html标签中去

直接上代码

//首先是先拿到select标签的ID

var $selected = $("#select");

$selected.empty();//清空内容

var obj = '';//创建一个全局变量,用来存储接下来循环里的内容

$("#select").append('<option value="86">中国</option>');//给select标签内添加默认内容

for(var i = 0; i < options.length; i++){//通过for循环来解析数组

//将option作为拼接字符串添加到变量obj中

obj += "<option class='option' value='"+ options[i].code +"'>"+ options[i].zh + "</option>";

}

//将循环内的字符串追加到select标签中

$("#select").append(obj);

//接下来就是今天的重点了,这个不算是什么难点,但是,我个人这次确实是第一次用到,主要是select标签内的option不能添加点击事件,导致在这个小问题上浪费了很多时间

给大家看下change()这个方法的用法

定义和用法

当元素的值改变时发生 change 事件(仅适用于表单字段)。

change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。

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

语法

触发被选元素的 change 事件:

$(selector).change()

添加函数到 change 事件:

$(selector).change(function)

===================================

$("#select").change(function(){

var text = $("#select").val();//将select内的内容保存到变量text中

$("#cuntryCode").html("+"+text);

//$("#cuntryCode")是对应的国家手机号的区号

})

 

 

 

展开阅读全文

没有更多推荐了,返回首页