The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Display selected value on dropdown list after selecting
Kitesurfer
post Aug 17 2022, 02:32 AM
Post #1





Group: Members
Posts: 3
Joined: 17-August 22
Member No.: 28,510



Display selected value on dropdown list after selecting.


Hi, I am using https://www.w3schools.com/css/tryit.asp?fil...dropdown_button

When making a selection see image attachment example: 1 - Wanaka or 2 - Queenstown
When selecting "Queenstown or Wanaka or etc" I would like to have the selected value showing after making the selection.

Hopefully, this is achievable.

Kind regards Rudy

IPB Image

This post has been edited by Kitesurfer: Aug 17 2022, 02:35 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2022, 03:33 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Kitesurfer @ Aug 17 2022, 09:32 AM) *

That's meant as a navigation menu, where clicking a link loads another page.

QUOTE
When making a selection see image attachment example: 1 - Wanaka or 2 - Queenstown
When selecting "Queenstown or Wanaka or etc" I would like to have the selected value showing after making the selection.

What do you mean with "selection" in this context? In the above dropdown menu, clicking a link would normally load the new page almost instantly.

Are you thinking of the SELECT element, where you can select an OPTION value before submitting a form? See also https://htmlhelp.com/reference/html40/forms/select.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kitesurfer
post Aug 17 2022, 05:37 AM
Post #3





Group: Members
Posts: 3
Joined: 17-August 22
Member No.: 28,510



QUOTE(Christian J @ Aug 17 2022, 08:33 PM) *

QUOTE(Kitesurfer @ Aug 17 2022, 09:32 AM) *

That's meant as a navigation menu, where clicking a link loads another page.

QUOTE
When making a selection see image attachment example: 1 - Wanaka or 2 - Queenstown
When selecting "Queenstown or Wanaka or etc" I would like to have the selected value showing after making the selection.

What do you mean with "selection" in this context? In the above dropdown menu, clicking a link would normally load the new page almost instantly.

Are you thinking of the SELECT element, where you can select an OPTION value before submitting a form? See also https://htmlhelp.com/reference/html40/forms/select.html


What i mean is:
When selecting Wanaka, the selected request would load the wanaka page but the button would show the word Wanaka instead of "Select or Clear Location", so that the user knows that the selected page is now page wanaka.
Hope this makes sence.
Cheers
Rudy

This post has been edited by Kitesurfer: Aug 17 2022, 05:39 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 17 2022, 08:58 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Kitesurfer @ Aug 17 2022, 12:37 PM) *

When selecting Wanaka, the selected request would load the wanaka page but the button would show the word Wanaka instead of "Select or Clear Location"

That would likely require javascript. A simpler idea might be to style the links in the menu with the CSS :active pseudo-class, then you can make the link highlighted at least while the mouse button is pressed down: https://www.w3.org/TR/2011/REC-CSS2-2011060...-pseudo-classes

However, If you use a form SELECT menu for navigation, it should automatically display the selected OPTION value even when closed. See also https://jkorpela.fi/forms/navmenu.html

I don't understand what the part "Clear Selected Location" is meant to do? It sounds like form Reset button, but that would have no purpose in a navigation dropdown menu like this one (unless you first select a Location and the press a "Go to Location" button). The demo at https://www.w3schools.com/css/tryit.asp?fil...dropdown_button doesn't use it either. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kitesurfer
post Aug 20 2022, 03:07 AM
Post #5





Group: Members
Posts: 3
Joined: 17-August 22
Member No.: 28,510



QUOTE(Christian J @ Aug 18 2022, 01:58 AM) *

QUOTE(Kitesurfer @ Aug 17 2022, 12:37 PM) *

When selecting Wanaka, the selected request would load the wanaka page but the button would show the word Wanaka instead of "Select or Clear Location"

That would likely require javascript. A simpler idea might be to style the links in the menu with the CSS :active pseudo-class, then you can make the link highlighted at least while the mouse button is pressed down: https://www.w3.org/TR/2011/REC-CSS2-2011060...-pseudo-classes

However, If you use a form SELECT menu for navigation, it should automatically display the selected OPTION value even when closed. See also https://jkorpela.fi/forms/navmenu.html

I don't understand what the part "Clear Selected Location" is meant to do? It sounds like form Reset button, but that would have no purpose in a navigation dropdown menu like this one (unless you first select a Location and the press a "Go to Location" button). The demo at https://www.w3schools.com/css/tryit.asp?fil...dropdown_button doesn't use it either. unsure.gif



Hi, many thanks for your help.
It seems I still have a lot to learn.
I will read up on your suggestions.
Kind regards
Rudy
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 06:02 AM