Bootstrap 组件之下拉框createOption用法详解

本文链接：https://blog.youkuaiyun.com/Noseparte/article/details/78946407

本文详细解析了Bootstrap组件中下拉框的createOption用法，提供了Github和NPM资源链接，以及作者的联系方式，便于读者深入理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap 组件之下拉框createOption用法详解

前言：

很多时候，在一个系统中经常会用到下拉框(表单)，这样的组件，例如下图中的下拉框，今天我就讲述一下，在实际项目中的实战

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 初始化下拉框 -->
<script src="plugins/utils/createOption.js"></script>
<script src="plugins/utils/createOptions.js"></script>
</head>

<body class="gray-bg">

    <div class="col-sm-2">
       <select class="form-control" name="sectionName" id="sectionName" value="${pd.sectionName}"
             ajax--url="/api/qa/full_qa_section_list" ajax--column="ID,TEXT" style="width:140px;">
             <option value="">--选择板块--</option>
       </select>
    </div>


    <script type="text/javascript">
        $(document).ready(function(){
           //初始化下拉菜单
           $("#sectionName").createOption();
        });
    </script> 
       
</body>
</html>

createOption.js

<script src="plugins/utils/createOption.js"></script>
    
(function($){
        $.fn.extend({
            createOption:function(){
             var $select=$(this);
             var selectVal=$select.attr("value");
             var url=$select.attr("ajax--url");
             var column=$select.attr("ajax--column");
             var dicCode =$select.attr("dicCode");
             
             
             if (column==undefined||column==""){
                    column="ID,TEXT";
             }
             var t_id=column.split(",")[0];
             var t_text=column.split(",")[1];
             
             if(dicCode==undefined||dicCode==''){
                    //如果url为空则返回
                    if (url==undefined||url==""){
                           return;
                    }
                    $.ajax({
                        type: "POST",
                        url:url,
                        async: false,//要指定不能异步
                        dataType:"json",
                        contentType:"application/x-www-form-urlencoded",
                        success: function(data) {
                           var options='';
                            $.each(data,function(n,value){
                                  var id=value[t_id];
                                  var text=value[t_text];
                                 
                                  var selected='';
                                  if(selectVal==id){
                                         selected='selected=" "';
                                  }
                                 options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
                                   });
                            $select.append(options);
                           /* debugger;
                            console.log(options);
                            console.log($select);*/
                        }
                    });
             }else{
                    $.ajax({
                        type: "POST",
                        url:"dic/getDicByCode",
                        data:{"code":dicCode},
                        async: false,//要指定不能异步
                        dataType:"json",
                        success: function(data) {
                           var arr = data.split(',');
                           var options='';
                            $.each(arr,function(n,value){
                                  var optionArr = value.split(':');
                                  var id=optionArr[0];
                                  var text=optionArr[1];
                                  var selected='';
                                  if(selectVal==id){
                                         selected='selected=" "';
                                  }
                                 options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
                                   });
                            $select.append(options);
                        }
                    });
             }
            }
        });   
    })(jQuery);

createOptions.js

<script src="plugins/utils/createOptions.js"></script>  
 
(function($){
        $.fn.extend({
            createOptions:function(params){
             var $select=$(this);
             var selectVal=$select.attr("value");
             var url=$select.attr("ajax--url");
             var column=$select.attr("ajax--column");
             var dicCode =$select.attr("dicCode");
             /*debugger;
             console.log(params);
             console.log("1-------------");*/
             
             if (column==undefined||column==""){
                    column="ID,TEXT";
             }
             var t_id=column.split(",")[0];
             var t_text=column.split(",")[1];
             
             if(dicCode==undefined||dicCode==''){
                    //如果url为空则返回
                    if (url==undefined||url==""){
                           return;
                    }
                    $.ajax({
                        type: "POST",
                        url:url,
                        data:params,
                        async: false,//要指定不能异步
                        dataType:"json",
                        success: function(data) {
                           //console.log(data);
                           var options='';
                            $.each(data,function(n,value){
                                  var id=value[t_id];
                                  var text=value[t_text];
                                 
                                  var selected='';
                                  if(selectVal==id){
                                         selected='selected=" "';
                                  }
                                 options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
                                   });
                            $select.empty();
                            $select.append(options);
                        }
                    });
             }else{
                    $.ajax({
                        type: "POST",
                        url:"dic/getDicByCode",
                        data:{"code":dicCode},
                        async: false,//要指定不能异步
                        dataType:"json",
                        success: function(data) {
                           var arr = data.split(',');
                           var options='';
                            $.each(arr,function(n,value){
                                  var optionArr = value.split(':');
                                  var id=optionArr[0];
                                  var text=optionArr[1];
                                  var selected='';
                                  if(selectVal==id){
                                         selected='selected=" "';
                                  }
                                 options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
                                   });
                            $select.append(options);
                        }
                    });
             }
            }
        });   
    })(jQuery);

About Me：