ブートストラップドロップダウンリストの複数選択コンポーネントの値

ブートストラップドロップダウンリストは非常に便利です。

特定の使用については、以下を参照してください。

リファレンス:https : //blog.csdn.net/qq_37677519/article/details/78143522

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>

コンポーネントの値:

1.選択された値
var value = $('#sel').val();
の配列です。
2.
実際に使用する場合、選択したキーを取得するには時間がかかりますが、方法は非常に簡単です。
companyName = companyName+$("#classId").find('option:selected')[i].text+"";

137の元の記事を公開 123のような 250,000以上を訪問

おすすめ

転載: blog.csdn.net/lz20120808/article/details/89738203