Solved

html select on change

Posted on 2016-10-14
3
45 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 57

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 57

Expert Comment

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

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 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