前言：
现时大家对“js设置select选中”大概比较关注，咱们都需要分析一些“js设置select选中”的相关内容。那么小编也在网摘上网罗了一些有关“js设置select选中””的相关文章，希望看官们能喜欢，兄弟们一起来学习一下吧！事件背景
开发技术是AngularJs，上周五，开发页面的时候，有个下拉选框（select），用ng-model绑定了一个值A，选项是在另外一个数组B里面的内容，做成的页面里下拉选框中总有一个空白项，选中其他的选项以后，空白项有消失了，给人的感觉很不好。所以就这个专题尝试了一下。
代码
（代码的风格可能不太好，请路过大大多指点(:3/L)）
首先是html:
<!DOCTYPE html><html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><!-- 正常显示中文用到的--> <title></title> </head> <style> select { width: 200px; } </style> <body ng-app="tapp"> <div ng-controller="tCtrl"> <!-- {{ data[0].value}} --> <!-- <div ng-repeat="obj in data">{{obj}}</div> --> js初始化:$scope.selectedOne={};<br> 第一个select：<select ng-model="selectedOne.value" ng-options="obj.value as obj.text for obj in data"></select><br> 第一个select所选的value: {{selectedOne}} <p></p> js初始化:$scope.selectedTwo='';<br> 第二个select：<select ng-model="selectedTwo.value" ng-options="obj.value as obj.text for obj in data"></select><br> 第二个select所选的value: {{selectedTwo}} <p></p> js初始化:$scope.selectedThree={value:''};<br> 第三个select：<select ng-model="selectedThree.value" ng-options="obj.value as obj.text for obj in data"></select><br> 第三个select所选的value: {{selectedThree}} <p></p> js初始化:$scope.selectedFour={value:'0',text:''};<br> 第四个select：<select ng-model="selectedFour.value" ng-options="obj.value as obj.text for obj in data"></select><br> 第四个select所选的value: {{selectedFour}} <p></p> js初始化:$scope.selectedFive={value:'0',text:'hahaha'};<br> 第五个select：<select ng-model="selectedFive.value" ng-options="obj.value as obj.text for obj in data"></select><br> 第五个select所选的value: {{selectedFive}} <p></p> js初始化:$scope.selectedFive={value:'',text:'hahaha'};<br> 第六个select：<select ng-model="selectedSix.value" ng-options="obj.value as obj.text for obj in data"> <option ng-init="">我来代表直接写option不写value的一项空白</option> </select><br> 第六个select所选的value: {{selectedSix}} </div> </body> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="template.js"></script></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051然后是js代码：
var tapp =angular.module('tapp', []);//原来定义的变量和APP的名字应该是一样的才行,左边这句话待验证tapp.controller('tCtrl', function($scope){ $scope.data=[ { value:'0', text:'zero' },{ value:'1', text:'one' },{ value:'2', text:'two' },{ value:'3', text:'three' },{ value:'4', text:'four' },{ value:'5', text:'我是来代表空白的' } ]; $scope.selectedOne={}; $scope.selectedTwo=''; $scope.selectedThree={ value:'' }; $scope.selectedFour={ value:'0', text:'' }; $scope.selectedFive={ value:'0', text:'hahaha' }; $scope.selectedSix={ value:'', text:'hahaha' };});123456789101112131415161718192021222324252627282930313233343536373839404142434445464748结论如果ng-model所绑定的变量的值在ng-options绑定的value里面有，下拉选框中就不会有空白的一项，选中别的数据项以后消失；
如果ng-model所绑定的变量的值不再ng-options绑定的value里面，下拉选框中就不会有空白一项,并且只有当ng-options绑定的value里有对应的text为空行时，这个空行才会一直存在于下拉选项里。
tip：要对应字段绑定，否则原来定义给变量的json串会被刷掉。
并且ng-model只绑定option的value值，本身有的text的值也不会被显示。就算在里面写option的文字内容或者ng-init也没用。
注意js里面的赋值要写成json的初始化语句，用“：”来赋值，否则会报错。再次强调注意赋值的顺序!!!!!!!不然变量的json格式会被刷掉！！
综上所述想要有一行是空行，就在ng-options的字典项里有一个value值对应的text为“”，并且先把ng-model的变量json的某一个字段附上这个value值，以后对于这个变量得赋值都要一项一项数据项的赋值。
关于上周末的问题，我认为在对于变量的赋值顺序和方式上面出了问题(:3/L)
select如果不写ng-model，下拉选框没有选项。写的时候别忘了，免得再调试半天。
标签： #js设置select选中
