option使用js动态对自定义属性赋值

//动态展示元素

var showDynamic=function(){

var inputValue=document.getElementsByName("a"悔友敬斗)[0]

//注意，碧稿槐此处必须写一个合适的触发事件，onclick or onfocus，也可以被调用触发。

//但是，必须有触发事件。

inputValue.onclick=function(){

if(this.value!=""){

showResult(this.value)

}

}

}

//展示函数

var showResult=function(v){

var showLabel=document.getElementById("functioncode")

for(var i=0i<showLabel.lengthi++){

if(showLabel[i].value==v){

showLabel[i].selected="selected"

}

}

}

//注册到window加载中

window.onload=showDynamic

//如果使用jQuery，则更加简单。以下是jQuery的写法，使用哪一种，你自己根据情况而定。

$(document).ready(function(){

var inputValue=$("input[name='a']")

inputValue.click(function(){//或者focus事件

var that=$(this).val()

$("#functioncode").each(function(){

if($(this).val()==that){

$(this).attr("selected",true)

}

})

})

})

Html5 data-* 属性者含乎定义和用法：

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分首悉：

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

有三种方法访问和修改data：

1.使用getAttribute setAttribute 方法

div.setAttribute('data-options',{/＊数据＊/})

div.getAttribute("data-options")；

2.使用dataset属性返回一个集合

div.dataset --> DOMStringMap { options:"{\"name\":\"John\"}", hidden:"true", lastValue:"43"}

可以访问，添加，删除

div.dataset.hidden

div.dataset.newAttr = "123"

delete div.dataset.hidden

3.使用jquery的data方法

.data( key, value )

.data( key, value )

.data( obj ) -->设置多个键值对

.data( key )

.data( key )

.data() -->返回一个集合

jQuery比较特殊的是，它会将返回值字符串自动转换为对应的数据类型。

比如上面的 $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }

注意：对老粗于dataset属性和jQuery的data方法： data- 属性名如果包含了连字符，例如：data-last-value ，连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是：lastValue 。

---