Hey Guys,
I have a form with 4 select tags:
<select class="section_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="section_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="section_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select class="section_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
I want to get by jquery all the classes of "section_1" and their selected options value.
I got now: $(".section_1")... by how I continue?
Thanks!
You can use .each for looping through that
$(".section_1").each(function(){
alert(this.value);
});
or you can use .map()
var selectedValues = $(".section_1").map(function(){
return this.value;
}).get().join(',');
You can see a working demo
To get all the values into an array:
var values = [];
$(".section_1").each(function() {
values.push($(this).val());
});
Or, with .map() as J-P suggested:
var values = $.map($(".section_1"), function(i) {
return i.value;
});
Really just a matter of taste which one you use.
$(".section_1 option:selected").each(function() {
alert($(this).val());
});
Or as Matt pointed out in the comments, calling .val() on a select will output all selected option values in an array:
var values = $('.section_1').val();
alert(values.join(', '));
Something like this?:
$(".section_1").each(function(){
var currentObjVal = $(this).val();
//do something with your currentObjVal...
});
If you just call below and pass it as the data parameter on the jquery ajax call it will take care of packaging the name and value for you. Try it. You don't need to loop through anything and make it a string. If all of the selects are the same name it will pass it as an array with the same names. If they are not it will break it out. Just make sure to have the names of the form elements set.
Example
$(function(){
$("#bt1").click(function(){
var selectedVals = $("select.section_1");
$.ajax({
type: "POST",
url: "www.yoururl.com",
data: selectedVals,
success: function(data) {
}
});
});
});
the option:selected filter is required in cases when you want to do some operations on the options tag, instead of the select tag. In any other cases, you can just use the .val() method.
The cases might be like
$('select option:selected').remove(); // remove the selected items
or
$('select option:not(:selected)').remove() // remove the items not selected
Related
When I try to use the Array.prototype.some() function on what I think should be an array as the result of an Array.prototype.map() from .filter() I get
.some is not a function
Here is a short snippet demonstrating the error with sufficient setup:
// Get all options from dropdown
var options = $("#mySelect option");
// Get array of strings matching regex from options
var numbers = options.map(function (index, option) {
return option.value.match("[0-9]+")[0];
});
// Attempt to use some on the numbers array
numbers.some(function (number) {
console.log(number);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Drop down menu with 10 options in words -->
<select id="mySelect">
<option value="1">One 1</option>
<option value="2">Two 2</option>
<option value="3">Three 3</option>
<option value="4">Four 4</option>
<option value="5">Five 5</option>
<option value="6">Six 6</option>
<option value="7">Seven 7</option>
<option value="8">Eight 8</option>
<option value="9">Nine 9</option>
<option value="10">Ten 10</option>
</select>
You (I) are mixing up JS array functions and JQuery functions. The .filter() in your post is actually a JQuery function that returns a JQuery object. From there, map is another JQuery function returning JQuery and thus .some() on your object does not exist as it does not exist as a JQuery function.
A suitable solution would be to use the JQuery .each() function instead like this:
// Get all options from dropdown
var options = $("#mySelect option");
// Get array of strings matching regex from options
var numbers = options.map(function (index, option) {
return option.value.match("[0-9]+")[0];
});
// Iterate through your object with JQuery's .each()
numbers.each(function (index, number) {
console.log(number);
// You can return false to break this loop early similarly to .every() (or inversely to .some) on JS arrays
if (number == 5){
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Drop down menu with 10 options in words -->
<select id="mySelect">
<option value="1">One 1</option>
<option value="2">Two 2</option>
<option value="3">Three 3</option>
<option value="4">Four 4</option>
<option value="5">Five 5</option>
<option value="6">Six 6</option>
<option value="7">Seven 7</option>
<option value="8">Eight 8</option>
<option value="9">Nine 9</option>
<option value="10">Ten 10</option>
</select>
This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I need to access the value selected from a drop down list using Javascript. But every time I get 'null' as the answer though a list item is selected.
My HTML page:
<select class="mySelect">
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
<input type="button" value="show attributes" class="panel-button-attr" onclick="choice()">
When the above button is clicked, the selected value should be alerted to the user. So in my Javascript function:
function choice() {
var choice=document.getElementById("mySelect");
alert(choice);
var strUser = choice.options[choice.selectedIndex].text;
alert(strUser.toString());
}
Here, I've tried to use the first alert to check if any selected list item is identified correctly. But, at this point, it displays null and the strUsr line doesn't run at all.
I know this is actually a trivial task but am finding it hard to figure this inconsistency.
Please change your HTML element attribute.
You've mentioned 'mySelect' as class and in JS, you are calling it with ID reference.
You have to specify id of select element
<select class="mySelect" id="mySelect">
follow the code:
you need to give id to dropdown because you try to get data by id so...
<select id="mySelect" class="mySelect">
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
I hope this will solve your issue....
Thanks...
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
plunker: https://plnkr.co/edit/Q7yyVvUTaLYvPaDW5j7G?p=preview
<select id="mySelect" class="mySelect" >
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
function choice() {
var choice=document.getElementById("mySelect");
alert(choice.value); // get value
var strUser = choice.options[choice.selectedIndex].text;
alert(strUser.toString());
}
You didn't have id in your html ,so I try by class name..
function choice() {
var choice=document.getElementsByClassName("mySelect");
var strUser = choice[0].options[choice[0].selectedIndex].text;
alert(strUser.toString());
}
I have a standard drop down list and I would like it to display the VALUE when closed but the text when expanded for selection. For example, based on my code below, if the user selects 'Item 3' from the list, 3 should be displayed when the list is closed. I'm to the point where I can get the value selected but I don't know how to rewrite what is displayed in the drop down list.
Appreciate any help!
<script type="text/javascript">
function setValue()
{
var value=document.getElementById("mySelect").value;
//Don't know what to put here
}
</script>
<select name="mySelect" id="mySelect" onchange="setValue();">
<option value="1" selected="">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Declare the mySelect variable which contains the <select> DOM. Then by using mySelect, you can get the attributes of the <select> tag.
var mySelect = document.getElementById("mySelect");
Then, you can access to the mySelect options which is an array.
mySelect.options[]
mySelect.selectedIndex will give you the current selected index of the tag.
Finally, by appending the .text attribute, you can set the new value of the current selection.
mySelect.options[mySelect.selectedIndex].text = mySelect.value;
Something like this:
function setValue() {
var mySelect = document.getElementById("mySelect");
mySelect.options[mySelect.selectedIndex].text = mySelect.value;
}
<select name="mySelect" id="mySelect" onchange="setValue();">
<option value="1" selected="">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
How to select dropdown option at the time of document load using Jquery?
Use
$(document).ready(function(){
$('#select-Id').val("rightVal");
});
Example:
For
<select id='days'>
<option value="sun">Sunday</option>
<option value="mon">Monday</option>
</select>
Use below code to select Monday
$(document).ready(function(){
$('#days').val("mon");
});
HTML:
<select id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Jquery:
$(document).ready(function(){
$('#sel').val('2');
});
See Demo
You can use
$(document).ready(function(){
$('#sel').val('myValue'); // to set the current value
var selectedvalue=$('#selectId').val(); // get the selected value
alert(selectedvalue);
});
DEMO.
I have 6 different select boxes and a text field which I need to fetch the value from and combine in to one text field using jQuery.
I understand essentially I will build the value for the targetTextField with a string like this: $('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);
What do I use to fetch the value of select#options1 and transform that in to opt1?
Would it be along the lines of opt1 = $('select#options1').val(); or am I heading in completely the wrong direction?
I've created a basic jsfiddle with just two options at:
http://jsfiddle.net/e2ScF/2/
jQuery
$(function() {
$("#options").change(function(){
var opt1 = $('select#options').val()
}$('#targetTextField').val(opt1+opt2);
});
$("#options2").change(function(){
var opt2 = $('select#options2').val()
}$('#targetTextField').val(opt1+opt2);
});
});
HTML
<select id="options">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
...but it doesn't appear to be working, so I've obviously misunderstood or missed something.
I made this demo for you, hope it helps
http://jsfiddle.net/e2ScF/5/
$(function() {
$("#options").change(function(){
setTarget() ; // Something has changed so lets rebuild the target
});
$("#options2").change(function(){
setTarget();// Something has changed so lets rebuild the target
});
});
// Just get the values you want and update the target
function setTarget(){
var tmp = $("#options").val();
tmp += $("#options2").val();
$('#targetTextField').val(tmp);
}
for dropdown try following
$('select option:selected').text()
have a look at this it should hopefully give you a pointer in what you need to do.
you can change the name to be a class and then just provide your format you want to display in the input. but from your question in presume it should be about that.
If you have different id for select box
var toalopt=$('select option1:selected').text();
toalopt+=$('select option2:selected').text();
toalopt+=$('select option3:selected').text();
toalopt+=$('select option4:selected').text();
toalopt+=$('select option5:selected').text();
toalopt+=$('select option6:selected').text();
document.getElementById('id where you want to club data').innerHTML=toalopt;
If you have same id
$(document).ready(function(){
$('#optionvalue).click(function(){
var values ='';
$('select[name="sameid"]').each(function(index,item){
values +=$(item).val() +' ';
});
$('id where you want to club data').val(values);
});
});
HTml will be normal select tag with id.
First of all, add a class to each of your select elements to better identify them as a group:
<select id="options" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
Then in jQuery, you can use map() to create an array of the values and display them:
$(".auto-updater").change(function() {
var values = $(".auto-updater").map(function() {
return ($(this).val() == "") ? null : $(this).val(); // ignore default option select
// return $(this).val(); // include all values
}).get();
$("#targetTextField").val(values.join(','));
});
Example fiddle
You can see that I've set this up to ignore select elements which are left on their default value. If you uncomment the line beneath it will include all selects, regardless of value chosen.
Minimal code required for you as below:
$(function() {
$("select").change(function(){
var opts=$('option:selected').val();
var oldVal=$('#targetTextField').val();
$('#targetTextField').val(oldVal+opts);
});
});
Find the jsfiddle demo here.