引导窗体帮助程序选择框

Bootstrap-formhelpers select box

本文关键字:选择 帮助程序 窗体      更新时间:2023-12-20

我有一个带有引导程序选择框的网页。

当我使用时

<div class = "bfh-selectbox">
    <input type = "hidden" name = "selectbox1" value = "">
    <a class = "bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" >
    <span class = "bfh-selectbox-option input-medium" data-option="1">Option 1</span>  
    <b class = "caret"></b>
    </a>
    <div class = "bfh-selectbox-options">
        <input type="text" class="bfh-selectbox-filter">
        <div role="listbox">
            <ul role="option">
                <li class = "reg-select"><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
                <li class = "reg-select"><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
                <li class = "reg-select"><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
                <li class = "reg-select"><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
                <li class = "reg-select"><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
            </ul>
        </div>
    </div>
</div>

页面上的每个javascript代码都停止工作。

除此之外,无法以某种方式切换选择框。我添加了来自bootstrap和bootstrap formhelpers站点的所有css和js文件。

我切换选择框的javascript代码:

<script type='text/javascript'>
    $(document).ready(function() {
            $('.reg-select').click(function() {
                    $().bfhselectbox('toggle');
            });
    });
</script>

还有谁对此有意见?

我认为您的资源加载顺序可能不正确。确保它们像这样运行:

CSS

  • 引导.css
  • 用于帮助.css的引导程序
  • 您的应用程序.css

JS

  • jquery.js
  • bootstrap.js
  • 引导程序-帮助.js
  • yourapp.js