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
Solved

html select on change

Posted on 2016-10-14
3
39 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 55

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 55

Expert Comment

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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
add image on html mail 6 26
html input 8 42
How to resize a div in html 3 35
jQuery - retrieve the  href="/user/Jane/" from the previous link 3 18
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

808 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