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, 2022 in Java by Rahul
• 9,670 points
2,990 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, 2022 by Aditya
• 7,660 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
751 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
1,187 views
0 votes
0 answers

How can I get bootstrap version via javascript?

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

Apr 13, 2022 in Java by Rahul
• 3,380 points
178 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
475 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,840 points
10,711 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,840 points
18,412 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,840 points
1,863 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
4,115 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, 2022 in JQuery by Edureka
• 13,640 points
1,678 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 Jun 28, 2022 in JQuery by rajatha
• 7,480 points
3,085 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP