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
});
Related
I want to add a class to a newly selected option/tag within a select2 multiple select element.
My approach is to use the templateSelection callback, but then the class is added to every selected option/tag when the element is initialized.
Could I use the select2:select to flag a newly added option/tag (like adding a new attribute to the data)?
Thank you very much. All the best, Phantomias
HTML
<select id="example" multiple="multiple" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY" selected>May</option>
<option value="JUN" selected>June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
Javascript
$('#example').select2({
placeholder: 'Select a month',
templateSelection: function (data, container) {
$(container).addClass('classHighlight');
return data.text;
}
});
$('#example').on('select2:select', function(e) {
console.log('Could I use this event?')
console.log(e.params.data);
});
fiddle:
https://jsfiddle.net/Phantomias/g4ae9xsd/23/
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
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 need to use multiselect so I got idea use select2 tags for that. But I got a problem.. I have rendered multiselect from nette with values.. when I look on html code I can see all options with their values.. but when I enable select2 for that select it says 'No results found' but still in code there are data.. also I wanted to use tags, and also this is not working either .. Any possible solutions guys? Thanks
I'm enabling select2 like this - that select has class 'multiple-regions':
<script>
$(document).ready(function () {
$('.multiple-regions').select2({
tags: true
});
});
</script>
PS: I have included jquery before bootstrap and select2 includes.
EDIT: posting HTML (I'm now using form component from nette but it's same when I use raw HTML)
{form filterRoutesForm}
<div class="row" style="padding: 0 1em;">
<div class="col-md-5">
<div class="form-group">
{label date class=>"form-control-label"/}
{input date class=>"form-control daterange-routes"}
</div>
</div>
<div class="col-md-5">
<div class="form-group">
{label region class=>"form-control-label"/}
{input region class=>"form-control multiple-regions"}
</div>
</div>
<div class="col-md-2">
{input search class=>"btn btn-primary form-control", style=>"margin-top: 35px;"}
</div>
</div>
{/form}
Here is same example with raw HTML:
<select name="region[]" multiple="multiple" class="form-control multiple-regions">
<option value="all">všechny kraje</option>
<option value="1">Praha</option>
<option value="2">Střední Čechy</option>
<option value="3">Jih a západ Čech</option>
<option value="4">Severní Čechy</option>
<option value="5">Východní Čechy</option>
<option value="6">Jižní Morava</option>
<option value="7">Severní Morava</option>
<option value="8">Bratislava</option>
<option value="9">Západní Slovensko</option>
<option value="0">Východní Slovensko</option>
</select>
BTW also I have tried added data as array in 'data' property in select2, but still same effect - No results found
You need to add select2.css, select2.js as well as jquery if that's not already done, add multiple and that's pretty much all you need.
$(document).ready(function () {
$('.multiple-regions').select2({
tags: true,
width: '100%'
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<select name="region[]" class="form-control multiple-regions" multiple>
<option value="all">všechny kraje</option>
<option value="1">Praha</option>
<option value="2">Střední Čechy</option>
<option value="3">Jih a západ Čech</option>
<option value="4">Severní Čechy</option>
<option value="5">Východní Čechy</option>
<option value="6">Jižní Morava</option>
<option value="7">Severní Morava</option>
<option value="8">Bratislava</option>
<option value="9">Západní Slovensko</option>
<option value="0">Východní Slovensko</option>
</select>
You could eventually add, if needed, closeOnSelect: false as a select2 argument to prevent it from closing on each select, it's useful for multiple selections.
After a few days for rest I solved it.. Problem was in external .js file - where my colleague defined .select2 style which select2 uses defaulty .. So when I wanted to declare select2 in script his style rewrited it and then it hasn`t data.. Thank you for everything. Cya
The below html code results in a red colored div and within it, there is a select element. With the div, attached a mouseenter and mouseleave events i.e. when mouse pointer is hovered on the div, the div background color turns yellow and when leaving out of div, it turns back to red again.
In mozilla, when mouse pointer is entered into the div, it turns yellow. when I select the dropdown option values, then also it remains yellow but this is not happening in IE. When I select even the first option, the div background turns red which should not happen. Please help me out with this example.
<html>
<head>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("#selectDiv").mouseenter(function(){
$("#selectDiv").css("background-color","yellow");
}).mouseleave(function(){
$("#selectDiv").css("background-color","red");
});
});
</script>
</head>
<body>
<div id="selectDiv" style="margin:20px; background-color:red;height:100px;width:100px;">
<select style="margin:10px;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
</div>
</body>
</html>
#AngelWorkz nice work. The select box is a bit tricky in most versions of ie. Clicking on it would correctly (given the way it renders select boxes) trigger a mouseleave / mouseout.
My advice is to use a timer.. do something like
http://jsfiddle.net/3GhT2/1/
$(function(){
var graceTimer = null;
$("#selectDiv").mouseover(function(){
clearTimeout(graceTimer);
$("#selectDiv").css("background-color","yellow");
}).mouseout(function(){
graceTimer = setTimeout(function(){
$("#selectDiv").css("background-color","red");
}, 500);
});
});