I have multiple select dropdowns as such:
<select name="offer1cards[]">
<option value="1">Card 1</option>
<option value="2">Card 2</option>
<option value="3">Card 3</option>
</select>
<select name="offer1cards[]">
<option value="1">Card 1</option>
<option value="2">Card 2</option>
<option value="3">Card 3</option>
</select>
<select name="offer1cards[]">
<option value="1">Card 1</option>
<option value="2">Card 2</option>
<option value="3">Card 3</option>
</select>
I am trying to get the values into a comma separated string using jquery but I know I am not doing something right:
var values = new Array();
$.each($("input[name='offer1cards[]']:selected"), function() {
values.push($(this).val());
var items = values.split(',');
alert(items);
});
How can I get these values into a string?
You are unnecessarily using :selected and instead of split use join to join a array, Just do
var values = new Array(), var items;
$.each($("input[name='offer1cards[]']"), function() {
values.push($(this).val());
});
items = values.join(',');
alert(items);
You $.map() them and then .join() 'em.
var res = $.map($("select[name='offer1cards[]']"), function(ele) {
return $(ele).val();
}).join(', ');
alert(res);
Demo: http://jsfiddle.net/5t9ddd98/1/
Related
I am trying that when the Change event is launched in a select with the same class as others, the value is retrieved, and if it is equal to one data then select another of the same select. My problem is in, I do not know how to create the selector. I've tried like this, but it does not work. Welcome all the answers
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this + 'option[value="3"]').prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
You can use this keyword to get select element and then use find method to get desired option. You cannot use this like you did in your example. Try running this + 'option[value="3"]' in your console - it will output "[object Window]option[value=\"3\"]", which is not a selector you wanted.
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this).find("option[value='3']").prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
$('.sel > option').click(function(e){
var = trueVal = "";
var selectedVal = $(e.target).attr('value');
if(selectedVal == '1'){
trueVal = '2';
} else if(selectedVal == '2'){
trueVal = '3';
}
return trueVal;
console.log(trueVal);
// Do whatever you want with trueValue
});
What I am trying to do is that when an option is selected (for example #4) I get the date from the json object so it would render out: "Monday 26th December". I'm struggling to display this - does anyone know how I could do this please?
https://jsfiddle.net/9L53epre/3/
$(function() {
$('select').change(function() {
var val = $(this).val();
console.log(val);
});
var data = $('#delivery-date').data('delivery-date');
console.log(data);
// console.log(data.item[val]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 4</option>
<option value="4">option 4</option>
</select>
The value in data-delivery-date attribute is a string - use JSON.parse() to convert it into an object - see demo below:
$(function() {
var data = JSON.parse($('#delivery-date').data('delivery-date'));
$('select').change(function() {
var val = $(this).val();
console.log(data[val]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<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>
Your data is a string. You need to convert is to a JSON object first then use dot or array notation to access the members.
$(function() {
$('select').change(function() {
var val = $(this).val();
console.log(val);
});
var data = JSON.parse($('#delivery-date').data('delivery-date'));
console.log(data['7']);
// console.log(data.item[val]);
});
I've updated your fiddle so that it parses your json string and then uses the dataObj[4] to to show the date.
var dataObj = jQuery.parseJSON(data);
https://jsfiddle.net/9L53epre/4/
Use JSON.parse to parse the json string and then you can loop over the object with a for. Try this:
$(function() {
var data = $('#delivery-date').data('delivery-date');
data = JSON.parse(data);
$('select').on('change', function() {
var val = $(this).val();
var data_length = Object.keys(data).length;
for (var k = 1; k < data_length; k++) {
if (val == k) {
$('#output').html(data[k]);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<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>
</select>
<p id='output'>
</p>
Also, if you want to append the values from JSON into the select dinamically, and filter the empty values, you can do it like this:
$(function() {
var data = $('#delivery-date').data('delivery-date');
data = JSON.parse(data);
var data_length = Object.keys(data).length;
for (var i = 1; i < data_length; i++) {
if (data[i] != '') {
$('select').append("<option value=" + i + ">option " + i + "</option>");
}
}
$('select').on('change', function() {
var val = $(this).val();
for (var k in data) {
if (val == k) {
$('#output').html(data[k]);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<option value='default' selected disabled>Select value</option>
</select>
<p id='output'>
</p>
I am trying to get the value of the selected option. However, there are 2 different select menus, using the same name and class. I want to be able to pull the text inside the value.
I already know which select option they choose, but I can't seem to get the value of the option.
This is the HTML
<div id="single_course" style="display: none;">
<SELECT class="form-control" name="course_choice">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
<div id="2day_course" style="display: none;">
<SELECT class="form-control" name="course_choice">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
This the JS Code
var course_choice = $('#register select[name=course_choice]').value;
Your advice is greatly appreciated!!
First of all, you cannot get the values of both. So, you can get it as an array. You can do like this:
<div id="single_course" style="display: none;">
<SELECT class="form-control" name="course_choice[]">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
<div id="2day_course" style="display: none;">
<SELECT class="form-control" name="course_choice[]">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
Or, if you cannot change the HTML, then you can do this way suggested by sjkm:
var course_choices = $('select[name="course_choice"]');
var course_choice[0] = course_choices.eq(0).val();
var course_choice[1] = course_choices.eq(1).val();
var course_choices = $('select[name="course_choice"]');
var course_choice1 = course_choices.eq(0).val();
var course_choice2 = course_choices.eq(1).val();
Try this:
// array of selected options (array items are dom objects)
var course_choice = $('#register select[name=course_choice] option:selected');
// extract option's value with jquery
console.log( $(course_choice[0]).val() );
console.log( $(course_choice[1]).val() );
// ... or without query
console.log( course_choice[0].value );
console.log( course_choice[1].value );
working fine for me :
<SELECT class="form-control select_addon" name="course_choice[]">
var mang_addon_cart = [];
var course_choice = $('.select_addon option:selected');
for(var i = 0; i < course_choice.length; i++){
var val_addon = course_choice.eq(i).val();
var name_addon = course_choice.eq(i).data('name');
mang_addon_cart.push({
giatri : val_addon,
name : name_addon
});
}
console.log(mang_addon_cart);
I have a var in js like this :
var string =
"<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="1">D</option>
<option value="2">E</option>
<option value="3">F</option>
<option value="1">G</option>
<option value="2">H</option>
<option value="3">I</option>
<option value="1">K</option>
<option value="2">L</option>
<option value="3">M</option>"
And i would like to create a code which parse it/do a filter, in order to keep in a new var only option with val= value i choose.
So the result i would like to obtain for exemple for value=1 is following :
"<option value="1">A</option>
<option value="1">D</option>
<option value="1">G</option>
<option value="1">K</option>"
Do you have an idea how to do?
Thanks a lot !
You can pass the string to the jQuery and use .filter() method.
var filteredElements = $(string).filter('[value=1]');
In case that you want a string representation of the elements:
var filteredString = $('<select/>').html(string).find('option').filter(function() {
return this.value !== '1';
}).remove().end().end().html();
You would be better keeping that as a set of jQuery elements:
var $options = $(string);
and then using jQuery methods to get the ones you want:
var $wanted = $options.filter(function() {
return this.value == 1;
});
See http://jsfiddle.net/alnitak/7ThYU/
Try this.
var string =
"<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="1">D</option>
<option value="2">E</option>
<option value="3">F</option>
<option value="1">G</option>
<option value="2">H</option>
<option value="3">I</option>
<option value="1">K</option>
<option value="2">L</option>
<option value="3">M</option>"
var elements = $(string);
var requiredelements = elements.filter("option[value=1]").html();
So say my page has a list of indexes '1,3,4,5,9,12' and a multi-select listbox with 12 items in it.
What's a fast way to use javascript to tell the listbox to multi-select all items at those indexes?
How would this be done using jQuery?
So for example if the user selects the 'caramel' preset associated with the 'candybar' listbox, it will select all the candy bars that have caramel... I think you get the idea.
This could do the trick:
<select id="select" multiple="multiple">
<option value="1">test 1</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
<option value="4">test 4</option>
<option value="5">test 5</option>
<option value="6">test 6</option>
<option value="7">test 7</option>
<option value="8">test 8</option>
<option value="9">test 9</option>
<option value="10">test 10</option>
<option value="11">test 11</option>
<option value="12">test 12</option>
</select>
Javascript (jQuery):
indexes = [1,3,4,5,9,12]
$(document).ready(function(){
for(i=0; i<indexes.length; i++){
$('#select option:eq(' + (indexes[i]-1) + ')').attr('selected', 'selected');
}
});
Without jQuery:
window.onload = function(){
var indexes = [1,3,4,5,9,12];
var options = document.getElementById('select').options;
for(i=0; i<indexes.length; i++){
options[indexes[i]-1].selected = true;
}
}
The jquery select plugin has a selectOptions(value[, clear]) method which selects multiple values in a select box. But it takes the values as parameter instead of indexes.
You'd be better off setting classes on the option elements and addressing them that way, rather than by index:
<select id="my-select">
<option class="caramel">Twix</option>
<option>Mounds</option>
<option class="caramel">Milky Way</option>
<!-- ... -->
</select>
And then:
$("option.caramel", "#my-select").each(function () { this.selected = true });
Edit:
But if you really want to do it by index, you could do:
function selectOptionsByIndex(select, indexes) {
var i = 0;
select.children().each(function (j) { if (indexes[i] == j) { ++i; this.selected = true } });
}
selectOptionsByIndex($("#my-select"), [ 1, 3, 4, 5, 9, 12 ]);
(This depends on the list of supplied indexes being in ascending order.)