Solved

html select on change

Posted on 2016-10-14
3
32 Views
Last Modified: 2016-10-14
On this jquery select list

http://jsfiddle.net/JTPDM/1/

How would I display the selected value on the page?
So if I selected Admin  after i select it.

Below that it would say.  

You selected: Admin
0
Comment
Question by:maqskywalker
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41844409
HTML
<select>
    <option>Yay</option>
    <option>admin</option>
    <option>Cool</option>
</select>
<div id="result"></div>

Open in new window

jQuery
$(function(){
  $('select').change(function(){
    var html = "You selected " + $(this).val();
    $('#result').html(html);
  });
})

Open in new window

Breaking it down
1. We add a div with an id that we can target for our message
2. We crate a document read block
$(function() {
});
This makes sure that our code runs only when the page is loaded - which avoids unexpected results when JavaScript tries to access parts of the document that don't exist yet
3. We bind an event handler to the select change event so that when a new option is selected the code is called
4. We create our message by concatenating the "You selected " to the currently selected value of the <select>.
Because we are in the <select> event handler $(this) refers to the <select> control and .val() will return the value of the currently selected option
5. Finally we send the string to the <div> with id="result"
0
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 41844412
thanks
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41844484
You are welcome.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now