How can I get a multiple selected values in dropdown - javascript

I am using drop down with multiple select name defined with select[]
How can I get selected values using jquery.

The same way as any form element - use val().
var selectedValues = $("#select").val();
With a multiple select you will see the value as a comma delimited string which can easily be posted for server-side processing or split into an array if required.
Example fiddle

If someone wants values with labels. Then here is the solution:
var hexvalues = [];
var labelvalues = [];
$('#myMultiSelect :selected').each(function(i, selectedElement) {
hexvalues[i] = $(selectedElement).val();
labelvalues[i] = $(selectedElement).text();
});

Try this,
Live Demo
$('#btn').click(function(){
$('#select option:selected').each(function(){
alert($(this).text());
});
})​

Try
var selectedItems= $('#ddlId option:selected');
selectedItems.each(function(obj,ind){
$(obj).val() ;
} // or do with for (var i=0// normal js loop

you should try this:
$("select[name^='select[']:eq(0)").val();
remember, that eq(0) is indicated what is the index of your element with the same name.

Related

Get all Select elements on the page with value set to foo

I have several <select> inputs on my page.
Using jQuery, how can I get all <select> elements with the selected option equal to "foo"? (Keeping the result as a jquery set, so I can traverse from each element in it)
I've tried the following, but this always seems to return an empty array.
$('option[selected][value="foo"]');
You may try this (Example) :
var sel = $('select').filter(function(){
return $(this).val() == 'foo';
}).get();
$(document).ready(function() {
var data = [];
$('select').each(function(index) {
if(this.selectedIndex) {
if(this[this.selectedIndex].value == 'foo') {
data.push(this[this.selectedIndex]);
}
}
});
console.log(data);
});
http://jsfiddle.net/G2szE/
$('select option[value="foo"][selected="selected"]').parent()
If you want to select all "select" tags and their respective values in Javascript then use this code:
var tag =document.querySelectorAll("select");
var values="";
for(var i=0; i<3; i++) {
values+= i+"="+tag[i].value+",";
}
alert(values);
Replace the number of values with array.length.

Add text with a specific class to dropdown <select>

I want to
Get Text From Classes with class .pick and populate them into a dropdown #pingList
1) my Variable picker returns a long string, so I assume I need to create an array
2) var array I want the result to be ['x','y','z'] as I assume this is what I need in the next step.
3) I then want to add this to the dropdown with the text and val set.
I am pretty sure all I am missing is the array part. Looking for some help.
My Jquery Code and Live Demo http://jsfiddle.net/UUY5Z/1/
// Get text from Pick CLass
var picker = $('.pick').text();
// Make an Array from string result above
var array = //??
// Add this to the dropdown
$.each(array, function (val, text) {
$('#pingList').append($('<option></option>').val(val).html(text));
});
.text() method returns textContent of all of the selected elements as one string, you can use .map() method instead which returns an array:
var picker = $('.pick').map(function(i, elem) {
return "<option value='"+i+"'>" +
(elem.textContent || elem.innerText) + // == $(elem).text()
"</option>";
}).get(); // array of options (string)
$('#pingList').append(picker);
http://jsfiddle.net/JJsRd/
Here an other solution , using $.each() :
$.each($('.pick'),function(i, elem){
$('#pingList').append( "<option value='"+i+"'>"+ $(elem).text() +"</option>");
});
DEMO HERE
$('.pick').each(function(){
$('#pinglist').append(""+$(this).text()+"");
});
This should work for Above Case.
http://jsfiddle.net/sushilbharwani/uNpND/
I have updated in your demo page.. #http://jsfiddle.net/UUY5Z/7/
$(".pick").each(function(){
var val = $(this).text();
$('<option>').val(val).text(val).appendTo('#pingList');
});
You can achieve the same like this.
No need to make an array.
$.each($('.pick'), function (val, text) {
$('#pingList').append($('<option></option>').val($(this).text()).html($(this).text()));
});
JSFiddle For Same http://jsfiddle.net/sushilbharwani/uNpND/

Getting value of selected checkbox with jquery from checkboxes without id's

I have a number of checkboxes that are generated from a JavaScript API call from a database. I need to be able to pass the values of the checkboxes which are then selected by the user, and sent to the processing page. The issue is that the checkboxes don't have ID's associated with them(or this wouldn't be a problem) They all have the same name, but no ID's.
What is the best way to find which check boxes are selected, and pass their values to the following page?
One way I started was with an array:
var options = ["option1","option2","option3"];
var option 1 = [0];
var option 2 = [1];
var option 3 = [2];
On the processing page, using:
var option1 = getFromRequest('option1') || '';
var option2 = getFromRequest('option2') || '';
var option3 = getFromRequest('option3') || '';
Is there a better way of doing this?
I've changed the implementation to the following:
var values = []
$("input:checkbox.subIndustry").each(function(){
values.push(this.value);
});
passing the values to the success page with
window.location.href = REGISTER_SUCCESS +'&values='values.join(",")
which should then get the value with
var variablname = getFromRequest('values') || "";
This is returning Undefined. Any help?
An easy way to select them would be something like $("input[type=checkbox]:checked")
However, if you wanted to keep up with them as they are checked, even if they are added after you load, you could create a variable, then asign a delegation to the "change" state of each input that is a checkbox and update this variable on each change.
It's as simple as:
var checked, checkedValues = new Array();
$(function() {
$(document).on("change", "input[type=checkbox]", function(e) {
checked = $("input[type=checkbox]:checked");
// if you wanted to get an array of values of the checked elements
checkedValues = checked.map(function(i) { return $(this).val() }).get();
// make a string of the values as simple as joining an array!
var str = checkedValues.join(); // would return something like: value1,value2,ext...
});
})
Working Example
Since all your checkboxes have the same name, you can retrieve the checked ones using a variation of:
var checked = $('input[name=ckboxname]:checked');
see: :checked selector for more information
you can simply get the values of checked checkboxes by using
$('input[name=checkboxname]:checked').val();
this will give you the value of checkbox which is checked and for all values simply use
each function of jquery.
Turns out, the answer was to utilize indexOf in the underscore.js library. The solution had to be applied in the API being used to send data.
(_.indexOf(values, '9') != -1 ? 1 : '0'),

How to find an element in an array by attribute in jQuery

I need help finding an object in an array of jQuery selectors by attribute.
This is the code used for selection of the inputs elements in a table:
var tableInputs = $('#clienti-table input:not(#additionalAds)');
In variable tableInputs there are 13 input elements. I need to find each element by the id attribute.
Is there any way to do it?
Hope someone can help me.
Thanks in advance.
You can loop over the colleciton with .each():
tableInputs.each(function(){
var elem = this; //do something with this.
var id = elem.attr('id');
});
Or you can extract an element with a particular id, like this:
var $myElem = tableInputs.find('#myId');
... or by specifying the context in which to look for your element, like this:
var $myElem = $('#myId', tableElements);
You can use filter to get the element with a given id.
tableInputs.filter('#'+someid);// this gives you the element in the selection with id `someid`
You can use a for loop:
for (var i = 0; i < tableInputs.length; i++) {
console.log(tableInputs[i].id);
}
Try this... $('#clienti-table input:not([id='additionalAds']));
Please try using .find()
el = $('#clienti-table input:not(#additionalAds)').find('#id');
http://api.jquery.com/find/

Jquery array.push() not working

I have been trying to add variables from a dropdown into an array using Jquery array.push() function but for some odd reason it is not working. Following is the jsFiddle link:
http://jsfiddle.net/dKWnb/3/
JavaScript :
$("#test").live("click",function() {
var myarray = new Array();
myarray.push($("#drop").val());
alert(myarray);
});
HTML
<Select name=drop id=drop>
<option value=1>1</option>
<option value=2>2</option>
</select>
<input type=button name=test id=test value=test>
Your HTML should include quotes for attributes : http://jsfiddle.net/dKWnb/4/
Not required when using a HTML5 doctype - thanks #bazmegakapa
You create the array each time and add a value to it ... its working as expected ?
Moving the array outside of the live() function works fine :
var myarray = []; // more efficient than new Array()
$("#test").live("click",function() {
myarray.push($("#drop").val());
alert(myarray);
});
http://jsfiddle.net/dKWnb/5/
Also note that in later versions of jQuery v1.7 -> the live() method is deprecated and replaced by the on() method.
Your code alerts the current value of the dropdown for me, showing that it has properly pushed into the array.
Are you wanting to keep old values and append? You're recreating the array each time, meaning that the old value gets clobbered.
Here's some updated code:
var myarray = [];
$("#test").click(function() {
myarray.push($("#drop").val());
alert(myarray);
});
jsFiddle
another workaround:
var myarray = [];
$("#test").click(function() {
myarray[index]=$("#drop").val();
alert(myarray);
});
i wanted to add all checked checkbox to array. so example, if .each is used:
var vpp = [];
var incr=0;
$('.prsn').each(function(idx) {
if (this.checked) {
var p=$('.pp').eq(idx).val();
vpp[incr]=(p);
incr++;
}
});
//do what ever with vpp array;
var array = [];
var element = "anything you want in the array";
array.push(element); // array = [ "anything you want in the array" ]

Categories

Resources