Solved

html select on change

Posted on 2016-10-14
3
42 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 56

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 56

Expert Comment

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

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

749 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