I have one dropdown in my html page that contains some 5 values: A, B, C, D, E. When I select C and page refresh, I want to reset all the selected values to the default page. How do I do that? Currently, when I am refreshing the page, the dropdown value is showing the previously selected value. So how do I do that?
You can add a function to body's onload function and set selected value of the dropdown to desired index.
Add autocomplete="off" to your tag so it will not populate fields automatically.
Just add the selected="selected" attribute to the <option> tag, which will make it the default selected drop-down list value, instead of using JavaScript.
<form>
<select>
<option value="default" selected="selected">Select A Letter:</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</form>
JSFIDDLE
You can try this:
<select autocomplete="off">
<option value="">Select none</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
[1]: http://jsfiddle.net/nR6CP/2/
Related
I am looking for a way to select an option from a drop down list using the item class, and containing text. For example
<select class="mySelect">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
I cannot use the select ID because it might change, but the class will always be the same. I want to do, if option has the word Test, make the color of the word "Test" blue.
I think I can handle the color assignment, but what I am having an issue with is using the class to select the child options. I have tried:
$('.mySelect option:contains("Test")');
However I get an error that this is not a valid selector.
I also tried:
$('.mySelect select option:contains("Test")');
Finally, thanks to comments, I tried
$('select option[value*="Test"]')
However, this only returns the first item.
OK, here is the actual code in production, lets see if this changes anything.
<select onclick="SetChoiceOption('ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownButton')" name="ctl00$ctl40$g_6a07f243_6d33_4cb8_bf98_47743415ee4a$ctl00$ctl05$ctl05$ctl00$ctl00$ctl05$ctl00$DropDownChoice" id="ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownChoice" title="Category: Choice Drop Down" class="ms-RadioText">
<option selected="selected" value=""></option>
<option value="Meeting Test">Meeting Test</option>
<option value="Work hours Test">Work hours Test</option>
<option value="Business Test">Business Test</option>
<option value="Holiday Test">Holiday Test</option>
<option value="Get-together Test">Get-together Test</option>
<option value="Gifts Test">Gifts Test</option>
<option value="Birthday Test">Birthday Test</option>
<option value="Anniversary Test">Anniversary Test</option>
</select>
Here is a fiddle that returns each as text, but, somehow does not return the elements.
https://jsfiddle.net/3hgpw778/
$('.mySelect option:contains("Test")'); is valid and is selecting the three options. but as an alternative you can try this:
$('select option[value^="Test"]')
$$('select option[value*="Test"]');
was the answer. I got the additional piece from Simple jQuery selector only selects first element in Chrome..?
I am working with select box. I use select box like as below:
<select name="cars" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<script>
function jsFunction(){
console.log($(.names).val());
}
<script>
The combo is look like as below:
THis function is working when the comboboz is chenged.But i want to show all option at the same time. But i don't want to use multiple option select. So that i used size option like as below:
<select name="cars" size="4" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
And then the select box look like as below:
And only only one option can selected. But my problem is not working function. When i use size attribute, and then the function is not triggered when selectbox is changed. When i remove this size, and then the function is triggered.
How can i show all option at the same time (without multiselect) without using size attribute ? Or how can i trigger this function with size attribute ?
Your JavaScript function shouldn't log anything at all, as it has a syntax error. $(.names) needs quotes around names. Also, it needs to reflect the class of your <select>.
First you need to add the class names to your select:
<select name="cars" size="4" class="names" onchange="jsFunction()">
And then add quotes around your jQuery DOM target:
console.log($('.names').val());
Here's the new code:
function jsFunction() {
console.log($('.names').val());
}
<select name="cars" size="4" class="names" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
I've created a fiddle showcasing this here.
Hope this helps!
I have this code below:
<select name='m-menu' onchange='location = this.options[this.selectedIndex].value;'>
<option selected value='/users/lol'>My Account</option>
<option value='/?signout'>Sign Out</option>
<option value='/photos'>Photos</option>
<option value='/post'>Share/Post</option>
<option value='/feed'>Feed</option>
<option value='/chat'>Create Chat</option>
</select>
However I want it to go to the account if the user clicks on "My Account". Can this be done without adding an other option the the select tag, If so please help???
I will need this to be used for mobile browsers and I need this to go to the url if and when the user selects an option
You can achieve that by changing the selected value when the user focuses on the select onfocus="this.selectedIndex = -1".
<select name='m-menu' onfocus="this.selectedIndex = 0" onchange='location = this.options[this.selectedIndex].value;'>
<option value="" style="display: none">Select an Item</option>
<option selected value='/users/lol'>My Account</option>
<option value='/?signout'>Sign Out</option>
<option value='/photos'>Photos</option>
<option value='/post'>Share/Post</option>
<option value='/feed'>Feed</option>
<option value='/chat'>Create Chat</option>
</select>
I would also suggest you add your event listeners from a separate javascript file instead of using the on* attributes.
You can do that using addEventListener
When I select a new value (3) in a drop down menu, I see that HTML still has the old value (10) as "selected".
<option value="1">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" selected="selected">10</option>
EDIT 1: the problem manifests itself when I clone the form. The cloned copy has its selected option reset. Is there a way to clone the selected value too?
The reason you are seeing this is that changing the selected index will not alter the attribute on the html element itself. However, the value actually is changed.
See this demo for an example of what the selected index shows when changed
<select onchange="alert($(this).attr('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
When I run that on jsfiddle I get null. Any ideas?
Here's the js fiddle:
http://jsfiddle.net/49wyG/
Thanks!
You have to grab the selected index of the element and go from there, try this:
<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'));">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
Works good on my end.
The data-type attributes are on the option elements not the select. I assume you want the data type of the currently selected one
<select onchange="alert($(this).find(':selected').attr('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
http://jsfiddle.net/49wyG/4/
The this refers to the select not the option. Try this instead:
<select>
<option data-type="1" value="a" onclick="alert($(this).attr('data-type'))">a</option>
<option data-type="2" value="b" onclick="alert($(this).attr('data-type'))">b</option>
</select>
Alternatively you could use the :selected selector or this.selectedIndex to grab the option. Something like this:
<select onchange="alert($(':selected',this).attr('data-type'))" >
you need to do this...
<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
the "this" object on the change event is the list, not the option