jquery .val() strange behavior on dropdowns - javascript

I have a html <select> tag with some <option>s. Something like this:
<select id="season">
<option value="">Select an option</option>
<option value="1">Spring</option>
<option value="2">Summer</option>
<option value="3">Autumn</option>
<option value="4">Winter</option>
</select>
And I have this javascript code:
<script>
$(document).ready(function(){
$("#season").val("1");
});
</script>
This does not select "Spring" option and remain in "Select an option" option! But when I use
$(document).ready(function(){
setTimeout(function(){
$("#season").val("1");
}, 100)
});
This works correct! What is the problem? Any help would be greatly appreciate.

Try This
<script>
$(document).ready(function(){
$("option[value='1']").attr('selected','selected');
});
</script>
Above mention code will work.
even below mention your code will work, but script section should below all the HTML code and before the body close tag. Because once jQuery or javaScript start executing at that time HTML DOM will available and script can able to select that DOM.
<script>
$("#season").val("1");
</script>
In your code once you add setTimeout and your script is able to select the option because you are delaying by 100 micro second, it means before executing your script HTML DOM are available that is why you are able to select the DOM
<script>
setTimeout(function(){
$("#season").val("1");
}, 100)
</script>

on page load is called after all resources is loaded whereas jquery ready is called when dom is loaded so basically ready gets called before on-load. Hence it does not work

Related

Pre-select option in dropdown menu with URL

I'm working with this code snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#GCValue").val(option);
});
// ]]>
</script>
I don't have a lot of latitude with how I can affect the page, this is in the <body> section of the page, since I don't have access to the <head> tag.
I have this form:
<select id=GCValue>
<option val="10">10</option>
<option val="25">25</option>
<option val="50">50</option>
<option val="100">100</option>
<option val="250">250</option>
</select>
and I would like to use the URL of the page to select one of these five options (currently default is 10). I think it's supposed to be either https://www.mywebsite.com/gift-card/?type=2 or https://www.mywebsite.com/gift-card/?GCValue=2 but neither work. I'm pretty new to JS and JQuery, so I know I have to be doing something wrong. Any help appreciated.
According to your code your URL should be something like
https://www.mywebsite.com/gift-card/?type=10
You have to pass the option values to the URL instead of the option indexes based on your current code.

Jquery preselect dropdown menu option in a plugin

I asked here a couple of days ago how can i make a dropdown section in a form pre select an option.
I have got an answer and tried it and some other suggestions i have found online, all of which had failed.
I attached two pictures showing what I did, so hopefully you guys will be able to help me.
(bear in mind that i used a plugin which only allows me to add code not edit the given one)
Num1
thats how the plugin made the form, i cannot edit it
Num2
thats what i have tried and it did not work
EDIT
here is the code the pulgin made:
<label class="fitText" style="font-size: 16px;">Product</label>
<select name="Product" data-export-field="">
<option value=""> - Product - </option>
<option value="A" data-price="0">
A
</option>
<option value="B" data-price="14">
B
(+$14.00)
</option>
</select>
What I made:
<script>
$(window).load(function() {
$('#Product option[value=A]').attr('selected','selected');
});
</script>
Hope you guys will help me! :D
Thanks
Yarin
This should achieve what you want-
script -
$(document).ready(function() {
$('select[name=Product] > option[value=A]').attr('selected','selected');
});
The # selector is for ID's, not name. Use the same selector for name as value.
$(document).ready() (or $(function() {} )) should be a little bit quicker as it calls when the DOM is ready for manipulation rather than when everything is ready. I've also heard that $(window).load(function() {}) can be called at unintentional times, project depending.
Otherwise your code is solid.
Or you can try this one :
$(document).ready(function(){
$("#select_id").val('A');
});
On page load, set default value for the select tag. Might help you.

Flip toggle switch jquery [duplicate]

This question already has an answer here:
Setting up the jQuery Mobile script
(1 answer)
Closed 8 years ago.
I created a Flip toggle Switch with:
<select id="flip1" data-role="flipswitch">
<option value="true">true</option>
<option value="false">false</option>
</select>
my script code looks like this:
<script>
$( "#flip1").change(function(){
alert("flip");
});
</script>
but if I change the Button, nothing happened. Maybe someone can help me. Thank you
Try this:
with ready function
http://jsfiddle.net/z5stP/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#flip1").change(function(){
alert("flip");
});
});
</script>
Open your Browser Console (F12) to see the errors on your Page.
Your code works but maybe your jQuery library could not found.
[https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers][1]
try using below code
<select id="flip1" data-role="flipswitch">
<option value="true">true</option>
<option value="false">false</option>
</select>
<script>
$("document").ready(function()
{
$( "#flip1").change(function(){
alert("flip");
});
});
</script>
Note: Always call ur script after dom is loaded. Enclosing user script inside $(document).ready() function ensures ur script to called after dom element is loaded

Javascript only works when assigning variable to function?

I'm working on a project that uses bootstrap. In the project, some additional functionality was needed so that when a user selects a certain option from the drop down it hid/showed certain content. It look as follows:
<select class="form-control" id="state-text" onChange="test()" name="selected-state" >
<!-- Select options here -->
</select>
Then I had the JS as follows:
function test()
{
// Code here
}
Now this didn't work, and would throw an error that function test was not defined. However, when I repalced it with:
test = function test()
{
//Code here
}
it worked as intended. I don't understand why one worked and the other didn't? Does it maybe have something to do with the other JS files that the bootstrap file is importing?
As you tagged the question as jQuery here's a fiddle I made quickly
http://jsfiddle.net/nYmF8/
markup
<select class="form-control" id="state-text" name="selected-state" >
<option value="a">A</option>
<option value="b">B</option>
<option value="b">C</option>
</select>
jquery
$(function(){$('#state-text').on('change', function () {
alert('changed value to to '+$(this).val());
});});
maybe you forgot to put your jQuery in the document ready function?
try to avoid adding JS in the middle of your HTML. Try doing that instead:
$(document).ready(function() {
$('#state-text').on('change', function () {
//Code Here
});
});
I am assuming here that you are using jQuery since it's a requirement for bootstrap. If not, let me know.

Setting select box using jQuery on document ready

Can anyone suggest how I get to change the selected item in a select menu with jQuery - I've tried the following but without success. Using this snippet how would I use jQuery to set to value '5' for example (eg Cambridgeshire) as the 'selected' value.
<script type="text/javascript">
$(document).ready(function() {
$('#county_id option[value=3]').attr('selected', 'selected');
});
<html>
<select name="county_id" id="county_id">
<option value="1">Bedfordshire</option>
<option value="2">Berkshire</option>
<option value="4">Buckinghamshire</option>
<option value="5">Cambridgeshire</option>
</select>
</html>
You just need to use the val method.
$('#county_id').val(5);
This should work in most cases and will automatically select the correct option.
<script type="text/javascript">
$(document).ready(function() {
$('#county_id').val(3);
});
</script>
Should be able to use a jquery selector than edit the attributes.
$('input:radio[name=county_id]')[3].checked = true;
or
$('input:radio[name=county_id]:nth(3)').attr('checked',true);
In this case, 3 is the counter associated with Cambridgeshire (remember, counting starts at zero).
via

Categories