I'm trying to save the "selected" option from the <select> HTML tag to the localStorage, so when I refresh the page the last selected option is selected. I can see that it's saved in the console.log, but it's not working on the page load. How can I make it work?
<select class="multiply_ing">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
<option value="2.5">2.5x</option>
<option value="3">3x</option>
<option value="4">4x</option>
<option value="5">5x</option>
<option value="6">6x</option>
<option value="8">8x</option>
<option value="10">10x</option>
</select>
<p class="portion" data-val="<?php echo $portion; ?>"></p> <!-- PHP Generated value, let's just say it's "1" -->
<div class="ingredient">
<p data-val="1"></p>
<p data-val="5"></p>
<p data-val="6"></p>
</div>
<script>
$(function() {
$(".multiply_ing").on("change", function() {
let multiply_val =+ this.value;
$('.ingredient p:nth-child(1)').each(function() {
let ing =+ this.dataset.val;
this.innerHTML = ing * multiply_val;
});
$('.multiply_ing option').each(function() {
let multi_opt = $(this).val();
let portion = parseFloat(document.querySelector(".portion").dataset.val);
let portions = multi_opt * portion;
});
let portion =+ document.querySelector(".portion").dataset.val;
document.querySelector(".portion").innerHTML = portion * multiply_val;
}).change();
jQuery($ => {
let $select = $('.multiply_ing');
// get on load
$select.val(localStorage.getItem('value') || 1); // 1 = default value
$select.on('change', e => {
localStorage.setItem('value', e.target.value);
});
});
});
</script>
Note: there is more code than in this example, but it's irrelevant to the problem.
To do what you require you can just use val() to both get and set the value of the select when required:
jQuery($ => {
let $select = $('.multiply_ing');
// get on load
$select.val(localStorage.getItem('value') || 1); // 1 = default value
$select.on('change', e => {
localStorage.setItem('value', e.target.value);
});
});
Also note that the each() in your example is doing nothing and can be removed. In addition, multiply_val is not defined anywhere.
As a general rule, if you're going to incur the performance penalty of loading jQuery in to the DOM, then you're better off making use of it everywhere. Mixing JS and jQuery just leads to confusion.
To store value in localStorage you have to use key value pair like this localStorage.setItem('selectedValue',yourValue) and to get value use key to access the saved value localStorage.getItem('selectedValue')
$(function() {
$('.multiply_ing').change(function() {
localStorage.setItem('selectedValue', this.value);
});
if(localStorage.getItem('todoData')){
$('.multiply_ing').val(localStorage.getItem('selectedValue'));
}
});
for working code you can see this demo
I am trying to modify some JavaScript that I have to make it so that when a option is selected depending on the num value it will run a different action.
Here is what my current JavaScript looks like:
jQuery(".frequency_new_selector").on("change", function() {
jQuery('.frequency_new_label option:first-child').attr("disabled", "disabled");
jQuery(".frequency_num").val(jQuery(".frequency_new_selector").find("option[value='" + jQuery(".frequency_new_selector").val() + "']").data("num"));
jQuery(".frequency_type").val(jQuery(".frequency_new_selector").find("option[value='" + jQuery(".frequency_new_selector").val() + "']").data("type"));
jQuery(".frequency_type_text").attr("value", jQuery(".frequency_type option[value='" + jQuery(".frequency_type").val() + "']").text());
if (jQuery(".frequency_new_selector").val() !== null && $(".single-option-radio input:checked").length == $(".single-option-radio").length) {
jQuery("#AddToCart").removeAttr("disabled");
}
});
I would like to add a line in that looks like this:
if (jQuery(".frequency_new_selector").val() == 1 {
event.preventDefault();
$('.cd-popup').addClass('is-visible');
}
My HTML looks like this:
<div class="frequency_new_label" style="">
<select class="frequency_new_selector">
<option selected="selected" disabled="disabled">Please Select Shipping Interval</option>
<option data-type="2" data-num="1" value="1">Weekly</option>
<option data-type="3" data-num="1" value="2">Monthly</option>
</select>
</div>
Yours should work the way you have done it... However i would probably change it slightly as you are making an unnecessary jQuery call and they are quite expensive operations.
When your change callback gets called this will be assigned to the DOM element (dropdown).
$(".frequency_new_selector").on("change", function() {
if (this.value === '1') {
event.preventDefault();
$('.cd-popup').addClass('is-visible');
}
});
I have a select tag with two options 'new' and 'edit'
when someone selects the 'new' option all the input tags in that form should be marked required and when someone selects 'edit' only a few should be marked required.
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>
Now I tried some functions but they don't seem to work
<script>
var todo = $('#todo option:selected').text();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
</script>
and
<script>
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectBox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
</script>
where
<select name="todo" id="todo" onchange="return req();" required></select>
just to be sure if it works I put a alert() method in the if condition, but that alert is never fired.
PS. one of the input tags is
<input type="text" id="Name" name="Name">
Thank you for your time in advance...
EDIT
As pointed out by #Maximillian Laumeister in second snippet there was a typo error (which I have corrected here). (sorry for that)
This should be ebough to get you going.
onchange detects whenever a different selection is made. Then based on what option is selected you perform the different instructions.
jQuery(document).ready(function(){
jQuery('#todo').on('change', function(event){
alert(this.value);
if(this.value === 'edit'){
}
else if(this.value === 'new'){
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>
In your script here you have a typo that throws a console error:
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectbox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
Where it says
selectBox.options[selectbox.selectedIndex].value
selectBox needs a capitalization like this:
selectBox.options[selectBox.selectedIndex].value
It seems to be working for me with that one change.
Also, since you asked, your first script isn't working because it needs to be bound to run when the select changes, just like with the first one. In addition, you need to use jQuery's val instead of text to get the value of an option tag. Here is a working version of your second script:
$("#todo").change(function () {
var todo = $('#todo option:selected').val();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
});
Try this:
$("select").change(function(){
if($(this).val() === "new")
$("#Name").attr("required","required");
});
You used the option text which is "Add" but in your if statement you compared it to the string "new". That's the reason your code didnt work as expected.
I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value="some_url" inside the option, then I want the image to show.
I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value="".
Here is the Javascript I'm using:
function showImage() {
document.getElementById('openimg').style.display = 'block';
Here is the html:
<select name="" >
<option value="url" onclick="showImage();">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to "show if" or "hide if" along with the onClick command within each option.
this is how I would do it:
<script type="text/javascript">
function showImage()
{
var choice = document.getElementById('myDropDown').value;
if(choice.length > 0)
{
document.getElementById('openimg').style.display = 'block';
}
else
{
document.getElementById('openimg').style.display = 'none';
}
}
</script>
<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
Um, are you asking how to use an if or how to determine what is selected?
First of all, use onchange event in the dropdown.
This is the LONGHAND way of doing it for illustration purposes.
function onChange(){
var mySelect = document.getElementById("my-select");
var selectedValue = "";
for( var i = 0; i < mySelect.length;i++){
if( mySelect[i].selected)
selectedValue = mySelect[i].value;
}
if( selectedValue == "whatever")
{
//do something
}
if( selectedValue == "ugh")
// do something else
}
I have the following HTML <select> element:
<select id="leaveCode" name="leaveCode">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
Using a JavaScript function with the leaveCode number as a parameter, how do I select the appropriate option in the list?
You can use this function:
function selectElement(id, valueToSelect) {
let element = document.getElementById(id);
element.value = valueToSelect;
}
selectElement('leaveCode', '11');
<select id="leaveCode" name="leaveCode">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
Optionally if you want to trigger onchange event also, you can use :
element.dispatchEvent(new Event('change'))
If you are using jQuery you can also do this:
$('#leaveCode').val('14');
This will select the <option> with the value of 14.
With plain Javascript, this can also be achieved with two Document methods:
With document.querySelector, you can select an element based on a CSS selector:
document.querySelector('#leaveCode').value = '14'
Using the more established approach with document.getElementById(), that will, as the name of the function implies, let you select an element based on its id:
document.getElementById('leaveCode').value = '14'
You can run the below code snipped to see these methods and the jQuery function in action:
const jQueryFunction = () => {
$('#leaveCode').val('14');
}
const querySelectorFunction = () => {
document.querySelector('#leaveCode').value = '14'
}
const getElementByIdFunction = () => {
document.getElementById('leaveCode').value='14'
}
input {
display:block;
margin: 10px;
padding: 10px
}
<select id="leaveCode" name="leaveCode">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
function setSelectValue (id, val) {
document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
Not answering the question, but you can also select by index, where i is the index of the item you wish to select:
var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;
You can also loop through the items to select by display value with a loop:
for (var i = 0, len < formObj.leaveCode.length; i < len; i++)
if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;
I compared the different methods:
Comparison of the different ways on how to set a value of a select with JS or jQuery
code:
$(function() {
var oldT = new Date().getTime();
var element = document.getElementById('myId');
element.value = 4;
console.error(new Date().getTime() - oldT);
oldT = new Date().getTime();
$("#myId option").filter(function() {
return $(this).attr('value') == 4;
}).attr('selected', true);
console.error(new Date().getTime() - oldT);
oldT = new Date().getTime();
$("#myId").val("4");
console.error(new Date().getTime() - oldT);
});
Output on a select with ~4000 elements:
1 ms
58 ms
612 ms
With Firefox 10. Note: The only reason I did this test, was because jQuery performed super poorly on our list with ~2000 entries (they had longer texts between the options).
We had roughly 2 s delay after a val()
Note as well: I am setting value depending on the real value, not the text value.
document.getElementById('leaveCode').value = '10';
That should set the selection to "Annual Leave"
I tried the above JavaScript/jQuery-based solutions, such as:
$("#leaveCode").val("14");
and
var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
in an AngularJS app, where there was a required <select> element.
None of them works, because the AngularJS form validation is not fired. Although the right option was selected (and is displayed in the form), the input remained invalid (ng-pristine and ng-invalid classes still present).
To force the AngularJS validation, call jQuery change() after selecting an option:
$("#leaveCode").val("14").change();
and
var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();
Short
This is size improvement of William answer
leaveCode.value = '14';
leaveCode.value = '14';
<select id="leaveCode" name="leaveCode">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
The easiest way if you need to:
1) Click a button which defines select option
2) Go to another page, where select option is
3) Have that option value selected on another page
1) your button links (say, on home page)
<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>
(where contact.php is your page with select options. Note the page url has ?option=1 or 2)
2) put this code on your second page (my case contact.php)
<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];
} ?>
3) make the option value selected, depending on the button clicked
<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>
.. and so on.
So this is an easy way of passing the value to another page (with select option list) through GET in url. No forms, no IDs.. just 3 steps and it works perfect.
function foo(value)
{
var e = document.getElementById('leaveCode');
if(e) e.value = value;
}
Suppose your form is named form1:
function selectValue(val)
{
var lc = document.form1.leaveCode;
for (i=0; i<lc.length; i++)
{
if (lc.options[i].value == val)
{
lc.selectedIndex = i;
return;
}
}
}
Should be something along these lines:
function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
if (dl.options[i].value == inVal){
el=i;
break;
}
}
dl.selectedIndex = el;
}
Why not add a variable for the element's Id and make it a reusable function?
function SelectElement(selectElementId, valueToSelect)
{
var element = document.getElementById(selectElementId);
element.value = valueToSelect;
}
Most of the code mentioned here didn't worked for me!
At last, this worked
window.addEventListener is important, otherwise, your JS code will run before values are fetched in the Options
window.addEventListener("load", function () {
// Selecting Element with ID - leaveCode //
var formObj = document.getElementById('leaveCode');
// Setting option as selected
let len;
for (let i = 0, len = formObj.length; i < len; i++){
if (formObj[i].value == '<value to show in Select>')
formObj.options[i].selected = true;
}
});
Hope, this helps!
You most likely want this:
$("._statusDDL").val('2');
OR
$('select').prop('selectedIndex', 3);
If using PHP you could try something like this:
$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';
switch($value) {
case '10' :
$first = 'selected';
break;
case '11' :
$second = 'selected';
break;
case '14' :
$third = 'selected';
break;
case '17' :
$fourth = 'selected';
break;
}
echo'
<select id="leaveCode" name="leaveCode">
<option value="10" '. $first .'>Annual Leave</option>
<option value="11" '. $second .'>Medical Leave</option>
<option value="14" '. $third .'>Long Service</option>
<option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';
I'm afraid I'm unable to test this at the moment, but in the past, I believe I had to give each option tag an ID, and then I did something like:
document.getElementById("optionID").select();
If that doesn't work, maybe it'll get you closer to a solution :P