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")是对应的国家手机号的区号

})