Not displaying correct option in drop-down menu - html

I created a drop down list with links. It works properly except when I go back one page, then instead of the option which is 'selected' in the HTML, it shows the option I had navigated to. I would like it to reset, so that the page I'm on is the one being displayed when the list is collapsed. How can I fix this?
<div id="drop">
<select name="year" id="year" onchange="location = this.value;">
<option value="sermons-2023.html"selected>2023</option>
<option value="sermons-2022.html">2022</option>
<option value="sermons-2021.html">2021</option>
<option value="sermons-2020.html">2020</option>
<option value="sermons-2019.html">2019</option>
<option value="sermons-2018.html">2018</option>
<option value="sermons-2017.html">2017</option>
<option value="sermons-2016.html">2016</option>
<option value="sermons-2015.html">2015</option>
</select>
</div>

You have to save the value with js in localstoreg and then after returning to the previous page you can see that the value is the same

Related

multiple select is not working at all on chrome

I'm having some weird issues.
I need a multiple select with some values in it, but somehow if I type
multiple and size values to select tag they are not working.
For that I decided to make a new clear file to test it and the result is same.
<form action="" method="post">
<select name="data[]" multiple size="5">
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
</select>
</form>
These are my codes, and this is below is the result:
screenshot
I can't even select them one by one, I mean browser is not highlighting the ones that I selected, I need to hold CTRL to hightlight them, as like working on windows I don't know where is the problem.
Most likely you have installed some Chrome extension that is preventing the Ctrl key to work as expected. Try removing that.
Have you bind it inside select tags?, you have to.
<select name="values" multiple>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
<option value="4">value4</option>
</select>
Hope it helps.
Please go with HTML multiple Attribute.
Try Below code:
<select name="Custom_Name" multiple>
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
Al the best.

How to Select all options in a dropdown by default using <Option Value=""> in chrome?

Here is the code I am having issues with:
<select name="webmenu" id="filter_option" style="width: 175px; " onchange="searchTree($(this).val());">
<option value="">--View All--</option>
<option value="Tree">Tree</option>
<option value="Dog Approval">Dog Approval</option>
<option value="Cat">Cat</option>
<option value="Sky">Sky</option>
I have an issue with the dropdown in that when I select this: <option value="">--View All--</option> in chrome the list does not load all default values when this option is selected.
When I go into chrome inspector and look at the line: <option value="">--View All--</option> the option value looks like this: <option>--View All--</option>
Why is it stripping out the value="" part of the code?
without the code ot link to that site I cannot guess what exactly is happening at your side.
but answering the question from the titleā€¦
you can only select multiple options if the attribute multiple is present in the tag select. then to make an option tag selected it needs the attribute selected.
so to select all options, all option tags need an attribute selected.
read up: select, multiple, option
<!doctype html>
<html>
<head><title></title></head>
<body>
<select size="5" multiple>
<option selected value="1">1</option>
<option selected value="2">2</option>
<option selected value="3">3</option>
<option selected value="4">4</option>
<option selected value="5">5</option>
</select>
</body></html>
if you can maybe add your problem to the above playground and a solution might be found through that.

How to refer to a website with section tags (HTML)

If you have
<select>
<option value="val1">Teemo bot</option>
<option value="val2">Teemo mid</option>
<option value="val3">Akali mid</option>
</select>
How do I make it, when you click on one, it transfers you to another site.
you might want to use on change, since you are unable to select a option if first click redirects.
<select onchange="javascript:document.location=this.options[this.selectedIndex].value;">
<option value="http://google.com">Google</option>
<option value="http://stackoverflow.com/">Stackoverflow</option>
</select>

How can I change the page by using html and css?

<select>
<option value="index.html">Home</option>
enter code here
<option value="about.html">About Us</option>
<option value="smt.html">Smt</option>
<option value="smt.html">Smt</option>
</select>
What is wrong in it ? why isn't changed the page by the time selecting an option?
In the form of the post method you can set it to the selected value.
<select name="menu" onchange="this.form.action=this.options[this.selectedIndex].value;">

hide selected value of a select list, when list is open

I have a dropdown select list, from which I can choose a country. the first option is: choose your country.
<select>
<option selected disabled value=''>Choose your country</option>
<option value="1">Canada</option>
<option value="2">France</option>
</select>
But when I click to open the list, I can see choose your country in the options. Is there a way to hide this option from the list, and only show it as a placeholder before any selection is made?
Hides the default option from appearing in the list:
http://jsfiddle.net/ZT2ZV/
IMO the better solution would be to use something like: http://harvesthq.github.io/chosen/
<select>
<option value='' disabled selected style='display:none;'>Choose your country</option>
<option value="1">Canada</option>
<option value="2">France</option>
</select>
Use display:none; on your first value:
<select>
<option value="" selected disabled style="display:none;">Choose your country</option>
<option value="2">Canada</option>
<option value="3">France</option>
</select>
try http://jsfiddle.net/uaF93/