The bootstrap drop-down list is very useful.
For specific use, please refer to:
Reference: https://blog.csdn.net/qq_37677519/article/details/78143522
Used in conjunction with angularjs:
<select zs-select data-size="5" id="classId" ng-model="healthInfomationClassList" title="请选择" data-live-search="true" multiple option-datas="optionDatas"
class="selectpicker show-tick form-control input-sm" style="width: 250px;">
</select>
<script>
angular.module("app").directive('zsSelect', function($compile) {
return {
restrict : 'A',
require : '?ngModel',
scope:{
optionDatas:'='
},
link : function($scope, $element, $attrs, $ngModel) {
$scope.$watch('optionDatas', function() {
var html = "";
var optionDatas = $scope.optionDatas;
if (optionDatas != undefined){
var options = optionDatas.data;
var name = optionDatas.name;
var id = optionDatas.id;
for (var i=0;i<options.length;i++){
var option = options[i];
html += "<option style='font-size: 10px' value="+option[id]+">"+option[name]+"</option>";
}
} else {
html = "";
}
$($element).html(html);
$($element).selectpicker('refresh');
if ($ngModel.$modelValue) {
$($element).selectpicker('val', $ngModel.$modelValue);
}
});
}
};
//数据的载入
$scope.optionDatas = {data:vm.logisticslist,name:"companyName",id:"id"};
</script>
Component values:
1. The selected value
var value = $('#sel').val();
is an array of values.
2. It takes
some time to obtain the selected key in actual use. The method is very simple.
companyName = companyName+$("#classId").find('option:selected')[i].text+"";