Bootstrap 4 multiselect dropdown

0 votes

I have read on many forums that the problem of select and multiselect has been resolved after the beta version of bootstrap 4. Unfortunately I am unable to display the multi select while using bootstrap 3 in bootstrap 4. Have shared my snippets below:-






Bootstrap 3 Snippet

$('select').selectpicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js">
</script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 

</select>

 

Bootstrap 4 Snippet

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 
</select>
Feb 22 in Java by Rahul
• 8,980 points
419 views

1 answer to this question.

0 votes

Due to the reason being that the bootstrap-select is a Bootstrap component and therefore you need to include it in your code as you did for your V3. However, please keep in mind that this component only works in bootstrap-4 since version 1.13.0




$('select').selectpicker();


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
  <option>Ketchup</option> 
  <option>Relish</option> 
</select>

answered Feb 22 by Aditya
• 7,280 points

Related Questions In Java

0 votes
2 answers

How can we assert, that a certain Exception is thrown in JUnit 4 tests?

@Test(expected = IndexOutOfBoundsException.class) public void testIndexOutOfBoundsException() { ...READ MORE

answered Dec 10, 2018 in Java by Sushmita
• 6,900 points
571 views
+1 vote
0 answers

Initially autowired object has value,it becomes null after paging(using JSF 2.2 and spring 4.01.)

i'm trying to create basic crud operations ...READ MORE

Jul 5, 2019 in Java by swats
931 views
0 votes
0 answers

How can I get bootstrap version via javascript?

Is there any way to get bootstrap ...READ MORE

Apr 13 in Java by Rahul
• 3,380 points
30 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
295 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
8,354 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
15,210 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,720 points
1,189 views
0 votes
1 answer

How to handle Bootstrap dropdown in Selenium Webdriver?

Hi Neeru, Bootstrap dropdown isn't like traditional ...READ MORE

answered Jul 19, 2019 in Selenium by Anvi
• 14,170 points
3,684 views
0 votes
1 answer

How to implement a dynamic bootstrap 4 accordion, using Jquery

With this you can add dynamic accordion ...READ MORE

answered Jun 7 in JQuery by Edureka
• 13,640 points
31 views
0 votes
1 answer

How to open a Bootstrap 4 modal dialog using jQuery

Use the modal('show') Method You can simply use ...READ MORE

answered 5 days ago in JQuery by rajatha
• 4,940 points
19 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP