I have a select menu with the weekdays. I would like this menu to have todays day selected. From W3Cschools, I got this simple code for getting an int for todays date:
var d = new Date();
var n = d.getDay();
This would output a 3, since it's wednesday. My problem here is to make the specific day in the list selected. Here is my code for the sropdown:
<div class="matmenu">
<select id="selectDagMat" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="wilink/mandag">Måndag</option>
<option value="wilink/tisdag">Tisdag</option>
<option value="wilink/onsdag">Onsdag</option>
<option value="wilink/torsdag">Torsdag</option>
<option value="wilink/fredag">Fredag</option>
<option value="wilink/lordag">Lördag</option>
<option selected="selected" value="wilink/sondag">Söndag</option>
</select>
Also, an example of the page can be found here:
http://stilius.se/wilink/
Thanks in advance!
Do you mean like this: http://jsfiddle.net/xuPz2/1/ ? You get the element via getElementById and then you set the value.
Related
I am new to Stack Overflow and this is my first question.
Please, I hope the question is not very silly and waste any of your time because my knowledge in coding/programming is not very high (I did a database course a few years ago and most I learned to do about coding was to create an exchange between EUR/USD and a clock lol)
So I have been trying to create some sort of presentation with HTML where you can see the results of several years (2020, 2019, etc) and we would like to display immediately below the results to the corresponding year, for example, if I select the year 2019 then below show results for 2019 (earnings, profit, losses and different numbers)
Here there is some basic example of the html code:
<p>Select the year results:</p>
<select id="Year" name="Year">
<option hidden="" disabled="disabled" selected="selected"
value="none">Select an Option</option>
<option value="Year 2021">Year 2021</option>
<option value="Year 2020">Year 2020</option>
<option value="Year 2019">Year 2019</option>
<option value="Year 2018">Year 2018</option>
</select>
I have been looking at some tutorials about HTML and testing a little bit and I already know how to link the results to another page, for example, if I select the year 2019 then a new page is opened and it shows the results of the 2019 year, but I would like to know how to show the results in the same page just below the selection menu. I mean the results change together with the "option value" selected.
So does anyone please know how to do this or have some example to show me so I can work on it?
Thank you all very much for your time and I am sorry if the question is very silly.
You can add onchange to the select, so when the value changes, a javascript function is executed that updates the rest of the HTML on your page.
Here is a simple example without any formatting
const twenty = [3, 42, 100]
const twentyone = [4, 24, 1]
const updateInfo = () => {
const select = document.getElementById('selector')
const div = document.getElementById('output')
let output
if (select.value === '2020') {
output = twenty
}
else if (select.value === '2021'){
output = twentyone
}
div.innerHTML = '' + output
}
<select id='selector' onchange='updateInfo()'>
<option value=2020>2020</option>
<option value=2021>2021</option>
</select>
<div id='output'></div>
For this you need a programming language that allows you to interact with the browser, such as Javascript. This is very necessary as it will allow you to dynamically insert, delete and update elements on the same page.
File index.html
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Select the year results:</p>
<select id="Year" name="Year" onchange="showResults(this.options[this.selectedIndex].value)">
<option hidden="" disabled="disabled" selected="selected" value="none">Select an Option</option>
<option value="2021">Year 2021</option>
<option value="2020">Year 2020</option>
<option value="2019">Year 2019</option>
<option value="2018">Year 2018</option>
</select >
<div id="result"></div>
</body>
</html>
File script.js
function showResults(selectedObject) {
//Inside this function the variable "selectedObject" contains the value of the selected option.
//From now on, Do what you want with the selected value.
//For example: Get data from a database and display it in a table, etc.
document.getElementById("result").innerHTML = "You selected: "+selectedObject;
}
Hope someone can help as this is a new one on me.
I'm trying to extract the "option value" from a particular location.
E.g. in the example below, I want to get the 2.0000 from "Ashton".
The HTML is
<div class="store-stock-select">
<select name="storestock" id="storestock" onchange="showMessage()">
<option value="">Check Store Stock</option>
<option value="2.0000">Ashton</option>
<option value="1.0000">Ballymena</option>
<option value="0.0000">Banbridge</option>
<option value="2.0000">Bangor</option>
<option value="0.0000">Bedford</option>
<option value="1.0000">Belfast</option>
<option value="1.0000">Blyth</option>
<option value="0.0000">Bolton</option>
<option value="0.0000">Bridgwater</option>
<option value="1.0000">Bristol</option>
...and the VBA I've tried so far is
Set dropOptions = HTML.getElementsByTagName("select")
For Each o In dropOptions.Options
If o.innertext = "Ashton" Then sh01.Cells(r, 5) = o.Value
Next
But to no avail. :(
If anyone could help me with this I would be so very grateful.
Thank you in advance.
Ian
You can use CSS selectors
HTML.querySelector("#storestock option + option[value]").value
Also,
HTML.querySelectorAll("#storestock option").item(1).Value
this is probably a very basic question, but I can't seem to figure it out.
In the code below you can see that I have a select-option block. It works fine. The only problem is that when I select one of the options (and get redirected to the corresponding page), the tick remains at the default value ("Sort...") of the select-option function.
<select name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
When a user selects "Preis aufsteigend", I would like the tick to be displayed at the corresponding option in the field...
Can anybody help?
Thanks in advance!
You need to reverse your onchange function. On page load look for the url variable you set then select the appropriate option.
Script
var sel = document.getElementById('sort');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {
if(window.location.search.indexOf(opt.value.split('?')[1]) > -1 ) {
sel.selectedIndex = j;
break;
}
}
HTML
<select id="sort" name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
http://jsfiddle.net/t95wqm48/
This is an example,
<select>
<option value=1>Cars</option>
</select>
How i can get the value of selected "1" and value in list box "Cars"?
try out this
<select id="selectID">
<option value=1>Cars</option>
</select>
using javascript
var e = document.getElementById("selectID");
var strUser = e.options[e.selectedIndex].value;
jQuery("#sltbox").find("option[value=1]").attr("selected","selected")
Give id as sltbox to your select tag.
I have a problem with my site. I have a select menu and 3 options: images, video and audio. When I click one of the options it should display a button to pick out the image/video/audio to upload, but this doesn't display in Google Chrome. In Firefox there is no problem with this. Does anyone have a solution for this?
Thanks very much!
EDIT:
This is the code
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
things i modified:
the second parameter is now a class name, each value separated by a "|"
used onChange() to trigger a selection (but does not trigger unless the value changes)
used this to pass a reference to the select rather than passing values (you can do more this way)
demo here
<select name="service_id" onChange="showSection(this)">
<option value="video" class='image|audio'>Video</option>
<option value="image" class='video|audio'>Imagini</option>
<option value="audio" class='video|image'>Audio</option>
</select>
<script type="text/javascript">
function showSection(el){
//modified to get the first and second parameters of showSection()
//get the value
var firstParam = el.value;
//get the class name of the selected element, and split it
var secondparam = el.options[el.selectedIndex].className.split('|');
console.log(firstParam);
console.log(secondparam);
}
</script>
Call the function on select not in options:
<select onClick='showSection(this.value,"a")'>
<option value="video" >Video</option>
<option value="image">Imagini</option>
<option value="audio">Audio</option>
</select>
i have tested this in chrome its working alright.
one suggestion is if you are using dropdown then use onchange event rather then using onClick
<?php
$videos=0;
$images=0;
$audios=0;
?>
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>