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

最新推荐文章于 2024-06-03 20:31:46 发布

Noseparte

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量1.9k

点赞数

分类专栏： bootstrap javascript 文章标签： bootstrap javascript

本文链接：https://blog.csdn.net/Noseparte/article/details/78946407

版权

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

摘要由CSDN通过智能技术生成

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=$sele