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
126 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
543 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
899 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
• 2,540 points
24 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,510 points
281 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,680 points
7,869 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,680 points
14,490 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,680 points
1,073 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,592 views
+5 votes
2 answers

Bootstrap SPAapp using Heroku commands

I've made a few assumptions You want to ...READ MORE

answered Oct 16, 2018 in DevOps & Agile by Kalgi
• 52,350 points
206 views
+4 votes
3 answers

Deploy RESTful API with .net framework 4.5 in AWS Lambda

This is an old question (somewhat), but ...READ MORE

answered Jan 17, 2019 in Cloud Computing by Kirk Davis
1,953 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