Have checked the below link i am also facing the same issue but i am using select2.js please let me know how can i get the multi value in the same order which i have selected from multiselected dropdown.
jquery multiselect selected data order
There is a Select2 issue, in multi-select: selections do not appear in the order in which they were selected.
Below is a snippet using the workaround proposed in that issue by user xelax90:
$(document).ready(function() {
$("#select").select2({
width: "100%",
});
$("#select").on("select2:select", function (evt) {
var elm = evt.params.data.element;
$elm = $(elm);
$t = $(this);
$t.append($elm);
$t.trigger('change.select2');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<div class="container">
<select multiple="multiple" id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
Related
I am trying to target a select2 element from the DOM and attach to its input field a keyup event. Because the element its hidden and created after the selection is pressed I cannot set any id or class name to the input. I made it work with event delegation using this code:
$('body').on('keyup', '.select2-search__field', function() {
//TODO: do some work here
});
This works fine, however it works for all the select2 elements I have on the page. I want to target a specific select2 element. I tried also to get the parent of the input so I can check which select2 element is currently used but it is not possible since select2 creates the elements directly at the body and not at the selection element. So all the select2 elements have parents with same classes and cannot be differentiated.
I am using the 4.0.4 version of the select2 and as I read so far the documentation there is no option to attach a custom event to the input.
You can use index() and .select2-container--open class to find the item.
$(document).ready(function(){
$('select').select2();
})
$('body').on('keyup', '.select2-search__field', function() {
var selectItem = $('.select2-container--open').prev();
var index = selectItem.index();
var id = selectItem.attr('id');
alert('index of the item =' + index +' and the id = '+ id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select id="first">
<option value="a">aaaaaaaaaaaaaaa</option>
<option value="b">bbbbbbbbbbbbbbb</option>
<option value="c">ccccccccccccccc</option>
</select>
<select id="second">
<option value="1">111111111111</option>
<option value="2">222222222222</option>
<option value="3">333333333333</option>
</select>
<select id="third">
<option value="q">qqqqqqqqqq</option>
<option value="w">wwwwwwwwww</option>
<option value="e">eeeeeeeeee</option>
</select>
You can find the select that is being clicked by $(".select2-container--open").prev(); and check if it has specific data-attribute you added to determine whether to do the stuff or not.
$(document).ready(function() {
$('.my-select').select2();
});
$('body').on('keyup', '.select2-search__field', function() {
let $select = $(".select2-container--open").prev();
if($select.data("show")) {
// TODO: do some work here
console.log(this.value)
}
});
select {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<div>
<select class="my-select">
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
</div>
<div>
<select class="my-select" data-show="true">
<option value="3">Option3</option>
<option value="4">Option4</option>
</select>
</div>
You could use :eq in the selector; https://api.jquery.com/eq-selector/
eq(1) because you want the second, index starts at 0
$('body').on('keyup', '.select2-search__field:eq(1)', function() {
//TODO: do some work here
});
Do run the snippet and change the value of the select fields;
$(document).on("change", ".select2-search__field:eq(1)", function() {
alert("Hello World!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select2-search__field">
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
<select class="select2-search__field">
<option>B1</option>
<option>B2</option>
<option>B3</option>
</select>
<select class="select2-search__field">
<option>C1</option>
<option>C2</option>
<option>C3</option>
</select>
<div class="form-group">
<label for="options">foo</label>
<select class="form-control" name="options" multiple>
<option value="">-- Choice --</option>
<option value="opt1">test1</option>
<option value="opt2">test2</option>
<option value="opt3">test3</option>
</select>
</div>
<script type="text/javascript">
$("#scope_new_system").change(function() {
var allSelected = new Array();
$("#scope_new_system option:selected").each(function() {
allSelected.push(this.value);
});
});
</script>
I'm trying to dynamically generate a select with different options based on options selected on the multiple select named "options" above. For example if I click on option test 1 then a select element with options shows to select an option. If I select test 2 then another select shows because I now have 2 options selected. Finally if I unclicked test 1 select option goes away and if i do the same with test 2 it also goes away as well and i'm left with nothing selected. Please help!.
Is this what you need?
$('#selectpicker').multiselect();
$('#selectpicker').on('change',function() {
var val = $(this).val();
$('.hidden_slc').hide();
for (x in val) {
$('#based'+val[x]).show();
}
})
<style>
.hidden_slc {
display: none;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select id="selectpicker" multiple>
<option value='1'>tes1</option>
<option value='2'>tes2</option>
<option value='3'>tes3</option>
</select>
<select id="based1" class='hidden_slc'>
<option>sample_from_1</option>
<option>sample</option>
</select>
<select id="based2" class='hidden_slc'>
<option>sample_from_2</option>
<option>sample</option>
</select>
<select id="based3" class='hidden_slc'>
<option>sample_from_3</option>
<option>sample</option>
</select>
You can use this.
var allSelected = [];
$("#scope_new_system").on("change",function() {
var allSelected = new Array();
$("#scope_new_system option:selected").each(function(){
allSelected.push(this.value);
});
console.log(allSelected)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="form-group">
<label for="options">foo</label>
<select id="scope_new_system" class="form-control" name="options" multiple>
<option value="">-- Choice --</option>
<option value="opt1">test1</option>
<option value="opt2">test2</option>
<option value="opt3">test3</option>
</select>
</div>
As I pointed So the relation between the two selects just to show/hide it?? or select 2 values depending on select 1 values?? I didn't got that point
But sure Your 1st step is: To check for option:selected length by using $("option:selected" , this).length; or $(this).find("option:selected").length;
$("#scope_new_system").change(function() {
var allSelected = [],
num_of_selected_option = $("option:selected" , this).length;
if(num_of_selected_option == 0){
// if nothing selected
alert('Nothing Selected');
}else if(num_of_selected_option == 1){
// if just one selected
allSelected = [this.value];
alert('Just one value selected : '+allSelected);
}else if(num_of_selected_option > 1){
// if more than one selected
$("option:selected" , this).each(function(){
allSelected.push(this.value);
});
alert('Selected Values : '+allSelected);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="options">foo</label>
<select id="scope_new_system" class="form-control" name="options" multiple>
<option value="">-- Choice --</option>
<option value="opt1">test1</option>
<option value="opt2">test2</option>
<option value="opt3">test3</option>
</select>
</div>
I added select2 class dynamically to current clicked an element, but search box comes after the 2nd click. It should come on the first click on the element.
Ex:
$(document).on('click', 'select', function () {
$(this).select2();
});
Thanks
After the select2 has been initialized then we can call it again with the command .select2('open')
Hope this is what you are looking for.
$(document).on('click', 'select', function() {
var select2_open;
$(this).select2().select2('open');
});
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<select class="select">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
$('.select').select2();
$(document).on('click', 'select', function() {
$(this).select2();
});
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<select class="select">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
You don't need to add onclick
Just $('select').select2();
https://jsfiddle.net/vandolphreyes29/z5ogefz8/7/
I have a HTML select dropdown with the multiple attribute.
The javascript code below lets me confirm the last selected option:
var pr = $("#iPRNum option:selected").last().val();
alert(pr);
It is working just fine if I select from top to bottom, but if I select the other way around, var pr is stuck with the first item selected.
Thank you very much...
Its working here
$("#iprnum").on("change", function() {
var pr = $("#iprnum option:selected").last().val();
alert(pr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="iprnum">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Do you need something else?
UPDATE
$('select').multipleSelect();
$("#iPRNum").on("change", function() {
var pr = $(this).val();
alert(pr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
<select multiple="multiple" id="iPRNum">
<option value="January">January</option>
<option value="feb">feb</option>
<option value="june">june</option>
<option value="art">art</option>
<option value="12">December</option>
</select>
Working demo with multiple-select library as you want
$("#iPRNum").on("change", function() {
var opt = $(this).val();
});
I am using counties.js form here and using select-2 plugin for drop down.
code for selecting country from the country drop down
<select class="select2 dep" name="country" id="country_list">
<optgroup label="Country">
<option value="">Select Country</option>
<script src="<?=base_url()?>assets/js/countries_states.js"></script>
<script language="javascript">
populateCountries("country_list");
var country_select = document.getElementsByName('country');
for(var m=0;m<country_select[0].options.length;m++)
{
if(country_select[0].options[m].value == '<?=$bhandar_details[0]['country']?>')
{
country_select[0].options[m].setAttribute("selected","true");
}
}
</script>
</optgroup>
</select>
and the code for default selection of states is as follows
<select class="select2 dep" name="state" id="state_list">
<optgroup label="State">
<option value="">Select State</option>
<script language="javascript">
populateStates("country_list", "state_list");
var state_select = document.getElementsByName('state');
for(var m=0;m<state_select[0].options.length;m++)
{
if(state_select[0].options[m].value == '<?=$bhandar_details[0]['state']?>')
{
state_select[0].options[m].setAttribute("selected","true");
}
}
</script>
</optgroup>
when the country is changed its respective states should change for that following script is written
<script type="text/javascript">
$( "#country_list" ).change(function() {
populateStates("country_list", "state_list");
});
</script>
everything works well and fine and when country is changed its respective states are populated in the state drop down. but the display text in state dropdown remains the same even though that state doesnot exists, until not changed manually to some other text.
Ideally as soon as country is changed the state list should change to default selection.
thank you all in advance. waiting for response...
I think what you do to the main select (behind the graphical select2) does not affect the select2 user interface.
In fact, you have to change the value of your select using the plugin itself.
Use this:
$("#state_list").select2().val(0); // any value you like
Working code:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/select2.min.js"></script>
<script src="js/countries_states.js"></script>
<link href="css/select2.css" rel="stylesheet"/>
<select class="select2 dep" name="country" id="country_list" style="width: 260px;">
<optgroup label="Country">
<option value="">Select Country</option>
</optgroup>
</select>
<select class="select2 dep" name="state" id="state_list">
<optgroup label="State">
<option value="">Select State</option>
</optgroup>
<script type="text/javascript">
$( "#country_list" ).change(function() {
populateStates("country_list", "state_list");
$("#state_list").select2().val(0); //----- added this code
});
$(document).ready(function() {
populateCountries("country_list", "state_list");
$("#country_list").select2();
$("#state_list").select2();
});
</script>
Try this this can help you by just doing a small effort
https://rubygems.org/gems/country_state_select