I have a multiple select:
<select name="courier" class="selectpicker courierpicker" multiple>
<option value="value1">Value1</option>
<option value="value2">Value2</option>
...
</select>
I want to use selected options as parameters for filtering rows in my table. This code doesn't work for me (assume, just for this example, that there is always more than one selected option):
$(".selectpicker").change(function() {
var items = [];
$('.courierpicker option:selected').each(function(){
items.push($(this).val());
});
var $result = '["' + items.join('","') + '"]';
$('#data-table').bootstrapTable('filterBy', {
courierfilter: $result
});
});
When I trigger:
$('#data-table').bootstrapTable('filterBy', {
courierfilter: ["value1","value2"]
});
Everything works just fine.
I know it will be some stupid mistake of the beginner, but thanks in advance for every help.
The issue is because the courierfilter property expects an array, yet you're providing it a string which is formatted like an array. Also note that the array generation can be made simpler through the use of the map() method. Try this:
$(".selectpicker").change(function() {
var items = $('.courierpicker option:selected').map(function(){
return this.value;
}).get();
$('#data-table').bootstrapTable('filterBy', {
courierfilter: items
});
});
Just use {courierfilter: items}.
Related
I have a multiple select list. When user unselects the selected option, I want to know the value of the unselected option made by user. How do I capture it?
My sample code is as below.
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I have following jquery code to allow user to select multiple options
$('option').mousedown(function(){
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false :true);
});
Mouse events aren't available cross browser
My suggestion would be always store array of previous values on the select.
On every change you can then compare to prior value array and once found update the stored array
$('#myselect').on('change', function() {
var $sel = $(this),
val = $(this).val(),
$opts = $sel.children(),
prevUnselected = $sel.data('unselected');
// create array of currently unselected
var currUnselected = $opts.not(':selected').map(function() {
return this.value
}).get();
// see if previous data stored
if (prevUnselected) {
// create array of removed values
var unselected = currUnselected.reduce(function(a, curr) {
if ($.inArray(curr, prevUnselected) == -1) {
a.push(curr)
}
return a
}, []);
// "unselected" is an array
if(unselected.length){
alert('Unselected is ' + unselected.join(', '));
}
}
$sel.data('unselected', currUnselected)
}).change();
DEMO
Great question, i wrote some codes for detecting unselected options using data attributes.
$('#select').on('change', function() {
var selected = $(this).find('option:selected');
var unselected = $(this).find('option:not(:selected)');
selected.attr('data-selected', '1');
$.each(unselected, function(index, value){
if($(this).attr('data-selected') == '1'){
//this option was selected before
alert("I was selected before " + $(this).val());
$(this).attr('data-selected', '0');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="select">
<option data-selected=0 value="volvo">Volvo</option>
<option data-selected=0 value="saab">Saab</option>
<option data-selected=0 value="opel">Opel</option>
<option data-selected=0 value="audi">Audi</option>
</select>
If I understand you correctly, you want the option that just got unselected, right?
if so, try this:
create a variable "lastSelectedValue" (or whatever you want to call it). When you select an option, assign to it, when you change the selected option, you can get the value and use it, and assign to it again
var lastSelectedOption = '';
$('select').on('change', function(){
//do what you need to do
lastSelectedOption = this.val();
});
here's a fiddle: https://jsfiddle.net/ahmadabdul3/xja61kyx/
updated with multiple: https://jsfiddle.net/ahmadabdul3/xja61kyx/
not sure if this is exactly what you need. please provide feedback
As mentioned by others, the key would be to compare the previous selected values with current value. Since you need to figure out the removed value, you can check if the lastSelected.length > currentSelected.length and then simply replace the currentSelected from the lastSelected to get the results.
var lastSelected = "";
$('select').on('change', function() {
var currentSelected = $(this).val();
if (lastSelected.length > currentSelected.length) {
var a = lastSelected.toString().replace(currentSelected.toString(),"");
alert("Removed value : " + a.replace(",",""));
}
lastSelected = currentSelected;
});
Working example : https://jsfiddle.net/DinoMyte/cw96h622/3/
You can try make it
$('#link_to_id').find('option').not(':selected').each(function(k,v){
console.log(k,v.text, v.value);
});
With v.text get the Text
With v.value get the Value
I have a problem with my Javascript code, I have a select and I add the value of the selected option (for example Volvo) in an array but when the user change the selected option (for example Lamborghini). I want to delete the last selected option in the array and add the newest in that.
How Can I do it ?
For information, I have multiple select option and I call the function changeClass()
Thank you for your helps
My HTML code
<select class="form-control" id="car" onchange="changeClass(this)">
<option value="1">Volvo</option>
<option value="2">VW</option>
<option value="3">Lamborghini</option>
</select>
My Javascript code
<script>
var data = [];
function changeClass(select) {
data.push(select.value);
}
</script>
use this in common select function, it will get all selected value into one array
var data;
$("select").change(function () {
data = $("select").map(function () {
return this.value;
}).get();
console.log(data)
});
DEMO
You can simply empty the array by re-defining it to empty array:
function changeClass(select) {
data = [];
data.push(select.value);
}
Just use splice to replace the last element with the new one:
var arr = ["aaa", "bbb", "ccc"];
arr.splice(arr.length - 1, 1, "ddd");
console.log(arr);
logs:
["aaa", "bbb", "ddd"]
If the item was added just before the new item then you can do something like this:
<script>
var data = [];
function changeClass(select) {
data.pop();
data.push(select.value);
}
</script>
If you wish to remove the item which was not added just before then you'll have to use event onfocus, grab the previously selected value and delete it when onchange event is fired.
I have a script like this
<script type="text/javascript">
function showSelected(val){
document.getElementById
('selectedResult').innerHTML = "The selected number is - "
+ val;
}
</script>
<div id='selectedResult'></div>
<select name='test' onChange='showSelected(this.value)'>
<option value='1'>one</option>
<option value='2'>two</option>
</select>
The output is shown with
<div id='selectedResult'></div>
So, I want to use this a variable
Actually, I want to get drop down box value with out submit. This script make it, but I can use another suggestions
Thanks
I'm not sure I really understand the question, but if you want to get what's stored in the DIV, use:
var stuff = document.getElementById('selectedResult').innherHTML;
I can suggest you another alternative i think is more useful and you can use it in different way # your project.
In this example you click the options you one and insert them to option list, you can send them from your select name=test if you want, you just need to change it.
DEMO
This is the script you can catch item,links,images,attributes and add them to select box:
$(document).ready(function(){
$('li').on('click',function(){
$('#theSelect').append('<option SELECTED>'+$(this).find('img').attr('value')+'</option>');
var seen = {};
$('option').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
});
})
$('#del').click(function() {
var $list = $('#theSelect option');
var d = $list.length;
var b=($list.length-1);
$('#theSelect option:eq('+b+')').remove();
});
I'm wondering if it's possible to store the selected values from a <select>in a JS array.
What I finally need to do is calculate the highest 6 values out of around 10 dropdowns, which I think I can do by using the JS Math.max() function.
Help is greatly appreciated.
Here is some sample code:
<? while($subjects = mysql_fetch_array($query)) { ?>
<select class="points">
<optgroup label="<?=$subjects['name']?>">
<option value="100">A1</option>
<option value="90">A2</option>
<option value="85">B1</option>
<option value="80">B2</option>
<option value="75">B3</option>
</optgroup>
</select>
<? } ?>
<script>....
Do something like this (JQuery):
var selected = new Array();
$('.points option:selected').each(function() {
selected.push($(this).val());
});
var selects = [].slice.apply(document.getElementsByTagName('select'));
selects.forEach(function (elem, i){
var value = elem.options[elem.selectedIndex].value;
//Do something with this value. Push it to an array, perhaps.
});
This assumes that all the selects on the page should be included. If that isn't the case, then you should use document.getElementsByClassName or a similar, more appropriate selector instead.
Demo
Try this:
var selectValues = [];
var selectNodeList = document.getElementsByClassName("points");
for (var i = 0; i < selectNodeList.length; i++) {
selectValues.push(selectNodeList[i].value)
}
// selectValues array now stores values of all <select> lists with class "points"
This originates from my original question. I'm expanding on it.
Html select options
<select id="1d" name="camp" multiple="multiple">
<option data-url0="week_1" value="Week 1">30th July</option>
<option data-url1="week_2" value="Week 2">6th August</option>
</select>
<input type="hidden" name="camp_url0" id="1e">
<input type="hidden" name="camp_url1" id="1f">
Jquery script I'm struggling with.
$("#1d").on("change", function () {
var url1 = $(this).children(":selected").data("url0");
var url2 = $(this).children(":selected").data("url1");
$("#1e").val(url0);
$("#1f").val(url1);
});
This code works beautifully (maybe not the cleanest?), except for one important issue. Even though it is a multiple selector, whenever both options are selected, only one option is marked as :selected in DOM, meaning only one data-url{row_id} is being inputted. I need both, if both are selected.
I hope that makes sense. Thanks for your help.
UPD:
Add some additional “routing” data to the html
<select id="1d" name="camp" size="5" multiple>
<option data-url="week_1" data-id="1e" value="Week 1">30th July</option>
<option data-url="week_2" data-id="1f" value="Week 2">6th August</option>
</select>
and use it
$("#1d").on("change", function () {
$('input[type=hidden]').val('');
$('option:selected', this).each(function() {
$('#' + $(this).data('id')).val($(this).data('url'))
})
})
http://jsfiddle.net/5ctDC/1/
OLD:
Just .map it and you will get an array with the data.
$('option:selected', this).map(function() {
return $(this).data('url')
})
["week_1", "week_2"]
http://jsfiddle.net/5ctDC/
Go through ALL of the selected elements:
$("#1d").on("change", function () {
var allurl1 = '', allurl2 = '';
$(this).children(":selected").each(function(){
allurl1 += $(this).data("url0");
allurl2 += $(this).data("url1");
});
$("#1e").val(allurl1);
$("#1f").val(allurl2);
});
Working Demo: http://jsfiddle.net/maniator/mtAgS/ (I made the inputs shown so you can visually see what happens)
In an unrelated note, you should'nt be using id that don't start with a letter.