I am using "Bootstrap Select Plugin Jquery". How do I replace it with Select Jquery code.
I would like to choose the value of the example 2.
Desired result:
enter image description here
MY Code:
$(document).ready(function() {
$('select').selectpicker();
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body>
<select class="my-select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Other</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
$('.my-select').selectpicker('val', '2');
Related
I am trying to use Bootsrap-select with Jquery for dynamic Dropdown values,but unable to use the Jquery append with Bootsrap-select. Although it is working perfectly with my Html (without using Bootsrap-select class )
Here is my complete code
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<h5>typeOfGlass</h5>
<select id="typeOfGlass" class="selectpicker">
<option value="15">Standard/Annealed Glass Width</option>
<option value="20">Tempered Glass Width</option>
</select><br>
Glass Width<br>
<select id="glassWidth" class="selectpicker">
<option value="19">Select type of Glass</option>
</select>
<script>$('#typeOfGlass').on('change', function(){
console.log($('#typeOfGlass').val());
$('#glassWidth').html('');
if($('#typeOfGlass').val()==15){
$('#glassWidth').append('<option value="19">Standard</option>');
$('#glassWidth').append('<option value="20">Standard 2</option>');
}else{
$('#glassWidth').append('<option value="6">Tempered</option>');
$('#glassWidth').append('<option value="7">Tempered 2</option>');
}
});</script>
</body></html>
I am stuck at this. Please let me know what am I missing in this.
Thanks in advance
add one line after appending to refresh select box as
$('#glassWidth').selectpicker('refresh');
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<h5>typeOfGlass</h5>
<select id="typeOfGlass" class="selectpicker">
<option value="15">Standard/Annealed Glass Width</option>
<option value="20">Tempered Glass Width</option>
</select><br>
Glass Width<br>
<select id="glassWidth" class="selectpicker">
<option value="19">Select type of Glass</option>
</select>
<script>$('#typeOfGlass').on('change', function(){
console.log($('#typeOfGlass').val());
$('#glassWidth').html('');
if($('#typeOfGlass').val()==15){
$('#glassWidth').append('<option value="19">Standard</option>');
$('#glassWidth').append('<option value="20">Standard 2</option>');
}else{
$('#glassWidth').append('<option value="6">Tempered</option>');
$('#glassWidth').append('<option value="7">Tempered 2</option>');
}
$('#glassWidth').selectpicker('refresh');
});
</script>
</body></html>
I have the following select box appearing in chrome but not in other browsers
Using bootstrap-select (1.12.2 V) to style the select box.
options.html
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit">
<option style="color: #5cb85c;"
ng-repeat="env in ctrl.qSettings.envs">{{env}}
</option>
</select>
html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<-- bootstrap select -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap
select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body ng-controller="abcCtrl as ctrl">
<div ng-include="'templates/options.html'"></div>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<-- ui select -->
<script src="node_modules/ui-select/dist/select.min.js"></script>
<link rel="stylesheet" href="node_modules/ui-select/dist/select.min.css">
</body>
</html>
Can you please guide me on what would be wrong here,Thanks.
Try ng-options.
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit"
ng-options="env in ctrl.qSettings.envs">
</select>
With my code below, I am trying to style my bootstrapped select picker with the "btn-warning style" as seen here: https://silviomoreto.github.io/bootstrap-select/
Here what my code looks like:
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="drake.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
</head>
<body>
<div id="course2">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</div>
</body>
As you can see, the select picker is not taking on the style or width attributes. What am I doing wrong? Thanks so much!
Fixed the URLs for you.
Notice I've moved the javascript files just before the closing tag </body> for faster page loading, and keep the css files at the <head>.
The problem was that you were using the incorrect url for bootstrap-select libraries. You can easily address those errors by using browser's developer tools, and then... well.. do some magic. :D
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>
EDIT: Also, why are you linking two bootstrap versions? 3.3.5 css and 2.3.1 js/css? You should use the latest only... try it
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>
How to check if select2.js has at least one option selected?
The code bellow shows the message 'Please select at least one item in the list.' even after selecting one item.
$('form.validate-form').validator({
disable: false
});
$( "select.validate" ).each(function() {
$(this).validator();
$(this).get(0).setCustomValidity('Please select at least one item in the list.');
});
How can I make the message 'Please select at least one item in the list.' disappear after selecting at least one option?
I am using Bootstrap validator plugin.
jsfiddle
SOMETHING LIKE THIS
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<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://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<style>
.mySelect {
width: 300px;
}
</style>
</head>
<body>
<form id="myform">
<select multiple="true" class="mySelect" name="item" required>
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="submit" name='submit' value="Submit">
</form>
<script>
$(document).ready(function() {
$(".mySelect").select2();
$("#myform").validate(
{
rules:
{
item:
{
required: true
}
}
});
});
</script>
</body>
</html>
I want to include this : http://loudev.com/
I followed the steps but the code is not working. I also included jquery scripts because I suspect that might be required. I am not understanding where is the mistake.
Thanks!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="something\jquery.multi-select.js" type="text/javascript"> </script>
<link href="something\css\multi-select.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
$('#my-select').multiSelect();
console.log("why");
</script>
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_5'>elem 5</option>
<option value='elem_6'>elem 6</option>
<option value='elem_7'>elem 7</option>
<option value='elem_100'>elem 100</option>
</select>
</body>
</html>
on console I do get the "why" and there are no errors , then whats going wrong..why it is not working as it supposed to.
Declare your JavaScript after your select box markup.
Also your source path seperators should be forward slashes "/" and not backslashes "\". e.g.
<script src="something\jquery.multi-select.js" type="text/javascript"> </script>
<link href="something\css\multi-select.css" media="screen" rel="stylesheet" type="text/css">
Should be
<script src="something/jquery.multi-select.js" type="text/javascript"> </script>
<link href="something/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">