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
Related
I'm adding select2 element like this
//HTML Code
<html>
<select id="select2Basic" class="select2 form-select form-select-lg">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 2 </option>
</select>
<select id="select3Basic" class="select2 form-select form-select-lg">
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
</select>
</html>
//Jquery
<script>
$("#select2Basic").select2(); //initialise select2 using id
$("#select3Basic").select2();
</script>
// I can't use same id on multiple element, that wont work.
Now i want a button that generate select2 element when clicked
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
});
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 have a form within a dialog that has a large number of select option elements. This works fine in IE and FF, but in Chrome, I am unable to scroll through the options. I can select them by selecting an option, then after the options collapse back down, use the arrow keys to go through the list. I am using Chrome Version 32.0.1700.76 and jQuery 1.9.1. I did attempt it using 1.10.2 as well and it did not fix the problem. My fiddle example uses 1.9.1 because selecting 1.10.2 did not allow be to include jQuery UI 1.9.2. You can even see in fiddle that the framework select input is not scrollable. Thanks.
http://jsfiddle.net/4mH8a/19/
HTML:
<form>
<input type="button" value="Open Modal" onclick="$('#divSelect').dialog('open');" />
</form>
<div id="divSelect" style="display:none">
<form>
<select name="lotsofoptions">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
<option value="7">option 7</option>
<option value="8">option 8</option>
<option value="9">option 9</option>
<option value="10">option 10</option>
<option value="11">option 11</option>
<option value="12">option 12</option>
<option value="13">option 13</option>
<option value="14">option 14</option>
<option value="15">option 15</option>
<option value="16">option 16</option>
<option value="17">option 17</option>
<option value="18">option 18</option>
<option value="19">option 19</option>
<option value="20">option 20</option>
<option value="21">option 21</option>
<option value="22">option 22</option>
<option value="23">option 23</option>
<option value="24">option 24</option>
<option value="25">option 25</option>
<option value="26">option 26</option>
<option value="27">option 27</option>
<option value="28">option 28</option>
<option value="29">option 29</option>
<option value="30">option 30</option>
</select>
</form>
</div>
JS:
$(document).ready(function(){
// Modal dialogs
$('#divSelect').dialog( { autoOpen:false,
modal: true,
title: 'Unable to scroll',
open: function (event, ui) { window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
}
} );
});
I am having a problem with jQuery Mobile. I want to make a custom select box with search option on the top like in the ul of jQuery mobile. I have made a custom select box using jQuery mobile but cannot add the search bar on it. I want exactly the thing like this:
http://jsfiddle.net/sEMyT/2/
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script class="jsbin" src="https://github.com/downloads/aliok/jquery-mobile/jquery.mobile_selectmenu_filter_01.js"></script>
<title>JS Bin</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<h2>Select menu options filtering</h2>
<p>The mobile browsers are limited and sometimes it is annoying to scroll a long list. For this kind of selects, you can use <code>data-filter</code> attribute alongside with <code>data-force-dialog</code> and <code>data-native</code> attributes to have a select menu with search bar filtering its options.</p>
Refresh the selectmenu (forcerebuild) with clearing the filter value
<div data-role="fieldcontain">
<label for="select-choice-12" class="select">Your state:</label>
<select name="select-choice-12" id="select-choice-12" data-native-menu="false" data-force-dialog="true" data-native-menu="false" data-filter="true">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
You can see the source code at https://github.com/aliok/jquery-mobile/commits/selectmenu-forceDialog/
<br/>
<br/>
Developed by Ali Ok - #aliok_tr
</div>
</div>
</body>
</html>
But the problem with that it is customized with a very old version of jQuery Mobile and I am using the latest version.
You could just follow the example on the JQM demo pages Filter inside Custom Select
I hope you can Use Select2 or Chosen
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
For more details and Demo : check Select2 or Try Chosen
Its implemented in our some projects and its works fine.
check out this in the jquery mobile site:
selectmenu-custom-filter
this is the original jquery mobile solution
this link its the best https://github.com/studiosedition/JQM-Custom-Search-Filtering-Example i tested
recommended by http://www.peachpit.com/articles/article.aspx?p=1929169
other example for custom filter
http://jsfiddle.net/dondavidml/ekbo4uy5/
$("ul").listview('option', 'filterCallback', function (text, searchValue) {
console.log(" searchValue " + searchValue.toUpperCase() + " text " + text.substring(0, searchValue.length).toUpperCase());
if (searchValue.toUpperCase() == (text.substring(0, searchValue.length).toUpperCase())) {
return false;
}
return true; });
be careful, the order matters in the imports like this
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/search-filter.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
:D