0

I have installed Bootstrap-Select package, version 1.13.1.

https://silviomoreto.github.io/bootstrap-select/

PROBLEM

I want to achieve multiple select functionality in my reactJS + Bootstrap project. However, the styling does not seem to be same as what is shown in the documentation example. Mine still shows 'basic' type of style.

What did I miss?

WHAT I HAVE DONE

I have put below piece in my jsx file. 

class MyTestBox extends React.Component {
//blah blah
render() {
//blah blah
<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <select class="selectpicker form-control" multiple>
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Relish</option>
            </select>
        </div>
    </div>
</div>
}}

var MyTestBox = ReactDOM.render(
    <MyTestBox />,
    document.getElementById('content')
);

This is my cshtml file.

@{
    ViewBag.Title = "Hello World";
}

//blah blah
<div id="content"></div>

@Scripts.Render("~/bundles/myTestBundle")
<script type="text/javascript">
    $(function () {
        $('.selectpicker').selectpicker();
    });
</script>

As per other posts, seems like I still need to add the URLs somewhere to refer to bootstrap-select libraries. Should I do that as well? If yes, how?

Bootstrap Select style and search not working

Bootstrap select picker style not working

xzk
  • 827
  • 2
  • 18
  • 43

1 Answers1

1

Replace class with className everywhere because JSX does not support class attribute It replaced by className in JSX.

<div class="row">

to

<div className="row">

You can use componentDidMount but I will initialize selectpicker code again and again so if your plugin will work fine with this then use

class abc extent React.Component{
    componentDidMount(){
      $('.selectpicker').selectpicker();
    }
}

//second option

use window.onloadwhich initialize your code once when your app will fully ready

<script>
window.onload = function(){
      $('.selectpicker').selectpicker();
}
</script>
Nishant Dixit
  • 5,388
  • 5
  • 17
  • 29
  • OK i've done it. It seems slightly better now. However, it is now shown as a scrolled selection field, instead of a drop down... – xzk May 22 '18 at 06:44
  • are you getting any JS issue in `console`? – Nishant Dixit May 22 '18 at 06:46
  • Oops..yes, Uncaught TypeError: $(...).selectpicker is not a function – xzk May 22 '18 at 06:47
  • I found this [link](https://stackoverflow.com/questions/43365047/selectpicker-is-not-a-function). I don't manage the sequence of loading js though...where should I specify the sequence? – xzk May 22 '18 at 06:50
  • The error was gone, after I added my scripts to bundle (the project is using .Net System.Web.Optimization.BundleCollection). Now the screen is showing previous scroll box (with value list) plus a new dropdown field with no values inside. – xzk May 22 '18 at 07:10