1、打开vscode，创建一个H5规范的页面，用于演示js如何给下拉框设置默认值。
2、在页面中添加一个下拉框，并在html中通过selected属性，默认选择下拉框的第2个值。
3、在浏览器中打开页面，就可以看到这个下拉框默认选中的第二个下拉值。
4、在页面顶部引入jquery，由于本文将jquery和页面放在同一级目录，所以，直接使用了jquery文件名引用。如果不在同一级目录，引入的路径需要有层级。
5、在页面底部，添加jquery代码，使用.val()方法，在页面文档加载后，就马上修改下拉框的默认选中值为第三个值。此时是不管html的标签中selected属性原来是标记在哪一个选项的，都会改成新的值。
6、在浏览器中打开页面，这个时候就会看到，下拉框的默认值已经变成了第三个选项。
7、如果想要通过下拉框的显示值来设置默认选中项，就需要使用类似下面的语法：
$("#sltDef").find("option:contains('第4个选项')").attr("selected",true)
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
.container{
margin:0px auto
width:520px
}
#result{
border:1px solid black
width:520px
height:100px
overflow:auto
}
.sp{
background-color:gray
border:1px solid black
width:60px
height:30px
text-align:center
line-height:30px
position:relative
margin:5px 5px 5px 5px
float:left
}
.sp span{
top: -8px
left: 6px
position: relative
cursor: pointer
}
.sp span:hover{
color:red
}
</style>
<script>
onload=function(){
var cks = document.getElementsByName("ck")
for(var i = 0i<cks.lengthi++){
var ck = cks[i]
ck.onchange = function(){
var tmp = "<div class='sp'>" + this.value + "<span onclick='rem(this)'>×</span></div>"
if(this.checked){
result.innerHTML += tmp
}else{
var reg = new RegExp("<div[^>]+>" + this.value + "<span[^>]*>×<\/span><\/div>", "i")
result.innerHTML = result.innerHTML.replace(reg,"")
}
}
}
}
var rem = function(obj){
var div=obj.parentElement
var cks = document.getElementsByName("ck")
for(var i = 0i<cks.lengthi++){
var ck = cks[i]
if(ck.value==div.childNodes[0].nodeValue){
ck.checked=false
break
}
}
div.outerHTML=""
}
</script>
</head>
<body>
<div class="container">
<fieldset>
<legend>
选择收件人：
</legend>
<label><input type="checkbox" name="ck" value="张三" />张三</label>
<label><input type="checkbox" name="ck" value="李四" />李四</label>
<label><input type="checkbox" name="ck" value="王五" />王五</label>
<label><input type="checkbox" name="ck" value="赵六" />赵六</label>
</fieldset>
<div>
收件人:
</div>
<div id="result">
</div>
</div>
</body>
</html>
