I've got a webpage with bootstrap selectbox.
When i use
<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>
every javascript code on the page stops working.
Besides that, the selectbox cannot be toggled somehow. I added every css and js files from bootstrap and bootstrap-formhelpers site.
My javascript code to toggle the selectbox:
<script type='text/javascript'>
$(document).ready(function() {
$('.reg-select').click(function() {
$().bfhselectbox('toggle');
});
});
</script>
Anyone else who has had any trouble with this?
I'd say you probably have your resources loaded in the wrong order. Make sure they go like this:
CSS:
JS: