I've been attempting to collect the selected data value of each of the dropdowns in a form and pass them into an array so that I can eventually add them together. However with my current code, the array only receives the value of the first dropdown, and not any of the others. I haven't got to the addition part yet, so I'm just joining the array with a comma, but here's my code so far:
HTML
<form id="questions">
<select name="q1" id="q1" tabindex="1">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q2" id="q2" tabindex="2">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q3" id="q3" tabindex="3">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<input type="hidden" id="calculator" value=""/>
</form>
JQUERY
var calculation = [];
jQuery("#questions").change(function() {
calculation.push(jQuery(this).find(":selected").data('calculate'));
jQuery("#calculator").val(calculation.join(', '));
});
Thanks in advance for the help!
Consider the following.
$(function() {
$("#questions > select").change(function(event) {
var calc = [];
$("#questions > select").each(function(i, el) {
calc.push($(el).val());
});
$("#calculator").val(calc.join(", "));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="questions">
<select name="q1" id="q1" tabindex="1">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q2" id="q2" tabindex="2">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<select name="q3" id="q3" tabindex="3">
<option data-calculate="0" value="No">No</option>
<option data-calculate="0.5" value="Partially">Partially</option>
<option data-calculate="1" value="Yes">Yes</option>
</select>
<input type="hidden" id="calculator" value="" />
</form>
Each change to a select element triggers the callback. Making a more global variable will cause it to get updated over and over again if the User makes many changes or changes their selection. This will capture all 3 values and join them. If the user changes a selection, the hidden field is updated with just the values currently selected.
Related
<div>
<label for="sort">sort</label>
<select name="sort" id="sort" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<label for="label">label</label>
<select name="label" id="label" class="form-control">
<option value=""></option>
<option value="label1">label1</option>
<option value="label2">label2</option>
</select>
</div>
There is a search function, so when I choose the sort and label select box then click the search button, it will sort data. But the selected value is not set in the select box.
How can I solve this? Please help me to solve this.
Add any event to get the selected dropdown value. Below, I have added a select change event.
$("#label").on("change", function(){
//get the data using the above ID's
var cars = ["Saab", "Volvo", "BMW"]; //example array
//appending to the new Select #newData
var htmlContent = "";
htmlContent = "<option value=''></option>";
$.each( cars, function( i, val ) {
$( "#" + val ).text( "Mine is " + val + "." );
htmlContent += "<option value= "+val+">"+val+"</option>";
});
$("#newData").append(htmlContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="sort">sort</label>
<select name="sort" id="sort" class="form-control">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<label for="label">label</label>
<select name="label" id="label" class="form-control">
<option value=""></option>
<option value="label1">label1</option>
<option value="label2">label2</option>
</select>
</div>
<div>
<label for="newData">New Data</label>
<select name="newData" id="newData" class="form-control">
</select>
</div>
I have two select boxes. The first select box has the id #first and the second select box has the id #second.
Each select box has two options with values 1,2. I want when i select the first option from the first select box to auto select the second option from the second select box AND when i select the second option from the first box to auto select the first option of the second select box:
Here is my code:
$(document).ready(function() {
$('#first').change(function() {
var val = $('#first').prop('selectedIndex');
$("#second").prop('selectedIndex', val);
if (val == "1") {
$("#second").prop('selectedIndex', val == "2");
} else if (val == "2") {
$("#second").prop('selectedIndex', val == "1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an orange</option>
<option value="2" style="color:#000;">You got an apple</option>
</select>
You can set a select by its value using .val(), in your case as you only have 2 values you can set the new value via the option value= instead of its selectedIndex using:
$("#second").val(val == 1 ? 2 : 1);
Updated snippet:
$(document).ready(function() {
$('#first').change(function() {
var val = $('#first').val() * 1;
$("#second").val(val == 1 ? 2 : 1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an orange</option>
<option value="2" style="color:#000;">You got an apple</option>
</select>
For completeness, to keep using selectedIndex (which is subtly different from value=), it's very similar as the option values are the same as the index, if they're not then you would need to change the values in the above, but not if using selectedIndex - conversely, if you change the order of the options then using value will still work while using selectedIndex would stop working.
$(document).ready(function() {
$('#first').change(function() {
var val = $('#first').prop('selectedIndex');
$("#second").prop('selectedIndex', val === 1 ? 2 : 1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an orange</option>
<option value="2" style="color:#000;">You got an apple</option>
</select>
It will be much easier to make the options on the same index. So apple will be first in the two selects, and orange will be the second in both, so on...
$(document).ready(function() {
$('#first').change(function() {
$("#second").prop('selectedIndex', $('#first').prop('selectedIndex'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="first" style="cursor:pointer;" id="first" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">First select</option>
<option value="1" style="color:#000;">I want an apple</option>
<option value="2" style="color:#000;">I want an orange</option>
</select>
<select name="second" style="cursor:pointer;" id="second" placeholder="Please select">
<option value="" disabled="" selected="" hidden="">Second select</option>
<option value="1" style="color:#000;">You got an apple</option>
<option value="2" style="color:#000;">You got an orange</option>
</select>
Hellloooooo...
I have two <select> inputs like this
<select id="sel1">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
//if 'a' is selected above,
//<option>apple</option>, <option>airplane</option>
//if 'b' is selected above,
//<option>banana</option>, <option>book</option>
</select>
And I want to list different sets of options according to the selection in sel1.
I could get the selected value using onchange attribute like this:
<select id="sel1" onchange="giveSelection(this)">
<script type="text/javascript">
function giveSelection(sel) {
var selected = sel.value;
}
</script>
But I can't come up with a way to use this value to output different select options in sel2.
Help please!
You almost got there. As you already got sel1's value, the rest is to filter options for sel1 based on the value.
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
I drummed up a version that can handle an unlimited amount of select combo dropdown list boxes, using jQuery. Hope this is useful to someone.
function jq_ChainCombo(el) {
var selected = $(el).find(':selected').data('id'); // get parent selected options' data-id attribute
// get next combo (data-nextcombo attribute on parent select)
var next_combo = $(el).data('nextcombo');
// now if this 2nd combo doesn't have the old options list stored in it, make it happen
if(!$(next_combo).data('store'))
$(next_combo).data('store', $(next_combo).find('option')); // store data
// now include data stored in attribute for use...
var options2 = $(next_combo).data('store');
// update combo box with filtered results
$(next_combo).empty().append(
options2.filter(function(){
return $(this).data('option') === selected;
})
);
// now enable in case disabled...
$(next_combo).prop('disabled', false);
// now if this combo box has a child combo box, run this function again (recursive until an end is reached)
if($(next_combo).data('nextcombo') !== undefined )
jq_ChainCombo(next_combo); // now next_combo is the defining combo
}
// quick little jquery plugin to apply jq_ChainCombo to all selects with a data-nextcombo on them
jQuery.fn.chainCombo = function() {
// find all divs with a data-nextcombo attribute
$('[data-nextcombo]').each(function(i, obj) {
$(this).change(function (){
jq_ChainCombo(this);
});
});
}();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
// select boxes...
1) first combo simply add data-nextcombo (class, id, etc) and onchange function
2) next combo that is controlled by first, add data-nextcombo (add onchange="jq_ChainCombo(this)" if not using the jquery plugin) and disable to hide entire option list until required.
3) last combo, don't bother adding a data-nextcombo to it
// data...
1) data should have a data-id, and data-option tag
2) data-option should be -1 if it is the root combo box, or if a child combo, the data-option should be the data-id of the parent.
-->
<!-- parent -->
<select class="combo-a" data-nextcombo=".combo-b">
<option value="1" data-id="1" data-option="-1">Bob's Coffee</option>
<option value="2" data-id="2" data-option="-1">Sally's Diner</option>
<option value="3" data-id="3" data-option="-1">Jim's Waffle House</option>
<option value="4" data-id="4" data-option="-1">No Mart</option>
<option value="5" data-id="5" data-option="-1">Ye Olde Ale Tavern</option>
</select>
<!-- child -->
<select class="combo-b" data-nextcombo=".combo-c" disabled>
<option></option>
<option value="1" data-id="1" data-option="1">15th's Avenue Coffee House</option>
<option value="2" data-id="2" data-option="4">14th Street location</option>
<option value="3" data-id="3" data-option="4">13th Avenue</option>
<option value="4" data-id="4" data-option="3">Scarlet Temple Location</option>
<option value="5" data-id="5" data-option="2">New Jack City</option>
<option value="6" data-id="6" data-option="5">Bob street</option>
<option value="7" data-id="7" data-option="1">Billy Avenue</option>
</select>
<!-- child/last -->
<select class="combo-c" disabled>
<option></option>
<option value="4" data-id="4" data-option="2">new display</option>
<option value="3" data-id="3" data-option="3">new display</option>
<option value="5" data-id="5" data-option="2">new display</option>
<option value="6" data-id="6" data-option="2">new display</option>
<option value="7" data-id="7" data-option="4">display #1</option>
<option value="8" data-id="8" data-option="5">new display</option>
<option value="9" data-id="9" data-option="5">new display</option>
<option value="10" data-id="10" data-option="5">new display</option>
<option value="11" data-id="11" data-option="5">new display</option>
<option value="12" data-id="12" data-option="5">new display</option>
<option value="13" data-id="13" data-option="6">new display</option>
<option value="14" data-id="14" data-option="6">new display</option>
<option value="15" data-id="15" data-option="6">new display</option>
<option value="16" data-id="16" data-option="1">Front's Counter</option>
<option value="17" data-id="17" data-option="1">back counter</option>
<option value="18" data-id="18" data-option="4">display #2</option>
</select>
I'm working on a hotel website and received a code from TravelClick for the booking mask. My client didn't like the "pop up calendar" so I tried implementing a "type="date" in the code instead. But when I click submit, it doesn't recognized the date anymore. I think the problem is that before the type value was "text" and now it's "date", but how can I change it back to "text" without losing the calendar?
<form action="https://booking.ihotelier.com/istay/istay.jsp" method="get" name="resform" id=resform"">
<input type="hidden" name="HotelID" value="12401" />
<input type="hidden" name="LanguageID" value="3" />
<input type="hidden" name="Rooms" value="1" />
Check-In Date:
<input type="date" name="DateIn" />
Nights:
<select name="Length">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10">11</option>
<option value="10">12</option>
<option value="10">13</option>
<option value="10">14</option>
</select>
Adults:
<select name="Adults">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Children:
<select name="Children">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="submit" value="Submit" />
</form>
<!-- This javascript code populates the Check-In Date field with today's date. It must be located after the form close tag. -->
<script type="text/javascript" language="javascript">
function getDateStr() {
var today = new Date();
var todayStr = (today.getMonth()+1) + "/" + today.getDate() + "/" + today.getFullYear();;
document.resform.DateIn.value = todayStr;
}
getDateStr();
</script>
Is it possible to to include multiple (or a single) <input type = hidden> nested within an <optgroup>'s <option>?
For example, I might have
<select>
<optgroup label="North America">
<option value="Canada">Canada</option>
<input type="hidden" name="capital" value="Ottawa">
<option value="United States">United States</option>
<input type="hidden" name="capital" value="Washington D.C.">
<option value="Mexico">Mexico</option>
<input type="hidden" name="capital" value="Mexico City">
</optgroup>
...
</select>
If I choose "Canada" could I get "Ottawa" and only "Ottawa" submitted also?
What you are asking for is not exactly possible, but it sounds like the result you want is...
<select name="capital">
<optgroup label="North America">
<option value="Ottawa">Canada</option>
<option value="Washington D.C.">United States</option>
<option value="Mexico City">Mexico</option>
</optgroup>
...
</select>
When the user selects "Canada" from the drop-down, the value "Ottawa" will be submitted to the server.