I am using data-live-search with bootstrap-select and am running into a problem where the blank spaces used in my options are not interpreted the same as a normal space. I would like to have replaced by a normal blank space. Was wondering if there is any easy way to fix this? Here is a JSFiddle of the problem. Code is below as well (per SO rules).
<body>
<div class="container" style="width: auto;">
<select class="selectpicker" title='Choose one of the following...' data-live-search="true">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</body>
I think there is no option o configuration to achieve your goal.
Probably the simplest way to do that is using jQuery:
$(document).ready(function() {
$(".selectpicker option").each(function(index) {
var txt = $(this).html().replace(" ", " ");
$(this).html(txt);
console.log(index + ": ", this);
});
$('.selectpicker').selectpicker('refresh');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<label>Select live search</label>
<select class="selectpicker" title='Choose one of the following...' data-live-search="true">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
Related
I am facing a strange problem with the Select2 library. I have added a few select html elements with different options specified for each tag. Each select is decorated with:
<select id="selectClient">
<option selected disabled="true">Client</option>
#foreach (var client in Model.Clients)
{
<option>#Html.DisplayFor(modelItem => client.ClientDisplayName)</option>
}
</select>
<select name="SelectedProduct" id="selectProduct">
<option selected disabled="true">Produkt</option>
#foreach (var product in Model.Products)
{
<option>#Html.DisplayFor(modelItem => product.ProductDisplayName)</option>
}
</select>
jQuery('#selectClient').select2({
placeholder: 'Client',
allowClear: true
});
jQuery('#selectProduct').select2({
placeholder: 'Client',
allowClear: true
});
Everything works like a charm to the moment when I select an option from the dropdown. When the option from the first select is selected and I move to the second select, then the second select's dropdown contains options from the first select list. Those options are separated in the html file. Did I miss something in the jQuery declaration?
Can you share your generated HTML code please ? Because I can't analyze from your razor codes
Check this example it's working fine
Js Fiddle Example
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select id="selectClient" style="width:200px">
<option selected disabled="true">Client</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select name="SelectedProduct" style="width:200px" id="selectProduct">
<option selected disabled="true">Produkt</option>
<option value="1">Option 4</option>
<option value="2">Option 5</option>
<option value="3">Option 6</option>
</select>
</body>
</html>
Js File
$('#selectClient').select2({
placeholder: 'Client',
allowClear: true
});
$('#selectProduct').select2({
placeholder: 'Client',
allowClear: true
});
In my website, i'm using jquery plugin select2. The plugins works for me but i have got one problem in my webpage. The dropdown element is not positioned correctly
select dropdown with select2
Here is my js code
$('.select-options').select2({
multiple: true,
selectOnClose: false,
closeOnSelect: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="select-options" name="comp[]" multiple>
<option value="1">Comp 1</option>
<option value="2">Comp 2</option>
<option value="3">Comp 3</option>
<option value="4">Comp 4</option>
<option value="5">Comp 5</option>
<option value="6">Comp 6</option>
<option value="7">Comp 7</option>
<option value="8">Comp 8</option>
</select>
for the positioning of the element, it's an option of select2 (version 4.1.0) or a css rule ? How customize the positionning of element dropdown ?
Thanks so lot
#Html.ListBox("RiskFactors", null, new { #class = "form-control select2" })
<script>
$('#RiskFactors').select2({
placeholder: 'Select Risk Factors',
closeOnSelect: false
});
</script>
Hi I hope I can communicate the information correctly and I apologize for the language errors
Please check the working example here you need to replace this code with your functionality.
var values = "1,3";
$('#example').val(values.split(','));
$('#example').select2().trigger('chnage');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js" integrity="sha256-d/edyIFneUo3SvmaFnf96hRcVBcyaOy96iMkPez1kaU=" crossorigin="anonymous"></script>
<select id="example" multiple="multiple" style="width: 300px">
<option value="1">A</option>
<option value="2">Youvalue</option>
<option value="3">Yourvalue </option>
</select>
I am trying to use select2. I added CSS & JS of select2 using below code.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/js/select2.min.js"></script>
I am using below JS Code in my HTML page.
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
placeholder: 'Select an option'
});
});
</script>
My HTML is like below
<select class="js-example-basic-multiple" multiple="multiple">
<option value="example1">example1</option>
<option value="example2">example2</option>
<option value="example3">example3</option>
<option value="example4">example4</option>
<option value="example5">example5</option>
<option value="example6">example6</option>
</select>
I am using below jQuery link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
But I am getting output like below
I have fixed your code please check it.
$('#example').select2({
placeholder: 'Select an option'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<select id="example" multiple="multiple" style="width: 300px">
<option value="example1">example1</option>
<option value="example2">example2</option>
<option value="example3">example3</option>
<option value="example4">example4</option>
<option value="example5">example5</option>
<option value="example6">example6</option>
</select>
I'm using RubyOnRails, so all my stylesheets should be including automatically.
I want to make my dropdown lists more user friendly, and I chose Chsen plugin.
Here is my code of page:
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.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/chosen.jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/chosen.jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
So javascripts and stylesheets are included, yes ?
My HTML code(from exmple):
<select tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
And in my application.js file:
$(document).ready(function(){
$(".chzn-select").chosen();
});
No errors in Google Console, but in my page it is showing as default select list. Why ?
You need to add a "chzn-select" class to your select tag. Your js code is applying the chosen plugin to any element it finds that uses that class. Here is what your select tag should look like:
<select class="chzn-select" tabindex="1" style="width:350px;" data-placeholder="Choose a Country">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
On your select tag you need to add class="chzn-select" to actually enable chosen.