I have multiple selectpicker and i dont understand how to change selected items format. Any suggestions guys?
I read this and found option selectedTextFormat but that's not what i need
$('.selectpicker').selectpicker({
selectedTextFormat: 'values'
});
Found sollution
$(window).on('load', function() {
$('.selectpicker').selectpicker({
showSubtext: true
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
<select class="selectpicker form-control" multiple>
<option data-subtext="Mustard" value="">1</option>
<option data-subtext="Ketchup">2</option>
<option data-subtext="Relish">3</option>
</select>
Related
I have a select on my page, for customization I use the selectpicker plugin. When the page loads, the area where the select should appear looks unacceptable for a while. How to display a select only when it has already been rendered by the selectpicker?
Codepen
$(function () {
$('select').selectpicker();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
Try below code:
<select class="selectpicker" name="selectpicker">
<option value="mustard">Mustard</option>
<option value="ketchup">Ketchup</option>
<option value="barbecue">Barbecue</option>
</select>
$(function () {
var selected=document.getElementsByName('selectpicker');
console.log(selected);
});
I am working on Reactjs and using "nextjs",Right now i am trying to use "google translator with flags"
but dropdown not opening and i am getting folllowing error
"Hydration failed because the initial UI does not match what was rendered on the server"
Here is my code (index.js),Thanks in advance.
<Head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/static/hello.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
</Head>
<div id="google_translate_element" style={{ display: "none" }} />
<select class="selectpicker" data-width="fit" onchange="translateLanguage(this.value);">
<option data-content='<span class="flag-icon flag-icon-us"></span> English' value="English">English</option>
<option data-content='<span class="flag-icon flag-icon-fr"></span> French' value="French">French</option>
<option data-content='<span class="flag-icon flag-icon-es"></span> Spanish' value="Spanish">Spanish</option>
</select>
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');
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>
What am I missing to get my javascript working via the asset pipeline?
When I try using jQuery chained to work through the assets, it doesn't work properly, however when I put the javascript function directly into the view it works perfectly.
I've got the the jquery-rails and coffee-rails gems installed. I saved the jquery.chained.mini.js code to vendor\assets\javascript\jquery.chained.mini.js.
I updated my application.js to include the plugin.
I included the
$("#series").chained "#mark"
script block into my app\assets\javascript\vehicle.js.coffee file.
When the view loads, the following is listed under head-
<head>
. Edited for brevity
.
.
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
.
.
.
</head>
The jquery plugin is there, as is the vehicles.js page. The source for vehicle.js comes out as follows-
(function() {
$("#series").chained("#mark");
}).call(this);
This should make the drop down lists in the edit view depend on each other. However, all the options are available no matter what in the second drop down box.
If I put the script directly into the view though, as show below, it works perfectly.
edit.html.erb
<!DOCTYPE html>
<html>
<head>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/equipment.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vehicles.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="PJnMEwkx/Ap2MQIHUsIcu0rYh+C6Or8VoVB9j2q9ptU=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div>
<select id="mark" class="span2">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option></select>
<select id="series" class="span2"><option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<script type="text/javascript" charset="utf-8">
$(function(){$("#series").chained("#mark");
});
</script>
</div>
</div>
</body>
</html>
Can someone explain why the code isnt working on the assett pipeline but is when I put it into the view direct?
Try precompiling the assets:
bundle exec rake assets:precompile
http://guides.rubyonrails.org/asset_pipeline.html
and then restarting Rails.