How to use jQuery to display text from a selected item in a select box.

I am trying to get the text (not value) of a selected item in a select box <option> and display it elsewhere on the page.

I have to admit im totally new to this so im going to need an explanation on plugging in a JQuery file...

Thanks!

3

Contributors

7

Replies

1 Week

Discussion Span

3 Years Ago

Last Updated

9

Views

Question
Answered

fielding

Newbie Poster

10 posts since Jan 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

To use jquery first download the jquery-1.4.1.js file from the link at
http://docs.jquery.com/Downloading_jQuery#Current_Release
Copy it in your webapp folder and use it in the <head> section of the web page as

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="jquery-1.4.1.js"></script>

Now if you an select element with id "seltest" as,

<SELECT ID="seltest" NAME="seltest">
		<OPTION VALUE="1" SELECTED>Test1</OPTION>
		<OPTION VALUE="2">Test2</OPTION>
		<OPTION VALUE="3">Test3</OPTION>
		<OPTION VALUE="4">Test4</OPTION>
	</SELECT>

Then in javascript and using the jquery we can get the text of the selected option as,

$("#seltest :selected").text()

parry_kulk

Junior Poster

Team Colleague

167 posts since Jan 2007

Reputation Points: 26

Solved Threads: 41

Skill Endorsements: 0

3 Years Ago

0

I would do it like this,

<script>
        
        // This selector is called every time a select box is changed
        $("select").change(function(){
            // varible to hold string
            var str = "";
            $("select option:selected").each(function(){
                // when the select box is changed, we add the value text to the varible
                str += $(this).text() + " ";
            });
            // then display it in the following class	
            $(".display_text_here").text(str);
        }).change();
        
    </script>

<SELECT ID="seltest" NAME="seltest">
		<OPTION VALUE="1" SELECTED>Test1</OPTION>
		<OPTION VALUE="2">Test2</OPTION>
		<OPTION VALUE="3">Test3</OPTION>
		<OPTION VALUE="4">Test4</OPTION>
	</SELECT>

	
	<div class="display_text_here"></div>

All of it together

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		
		<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
		
	</head>
	<body>
		
		
  	<SELECT ID="seltest" NAME="seltest">
		<OPTION VALUE="1" SELECTED>Test1</OPTION>
		<OPTION VALUE="2">Test2</OPTION>
		<OPTION VALUE="3">Test3</OPTION>
		<OPTION VALUE="4">Test4</OPTION>
	</SELECT>

	
	<div class="display_text_here"></div>

		<script>
			
		 		// This selector is called every time a select box is changed
				$("select").change(function () {
				  // varible to hold string
		          var str = "";
		          $("select option:selected").each(function () {
				  		// when the select box is changed, we add the value text to the varible
		                str += $(this).text() + " ";
		              });
				  // then display it in the following class	
		          $(".display_text_here").text(str);
		        })
		        .change();
			
		</script>
		
	</body>
</html>

Another thing, i would recommend staying away from upper-case all together, just kept it cause thats what parry_kulk started.

NB. This example was taken from API docs. Just broke it down for you, probably a better way, but im not going to write it up for you but you should get it.

If you have any questions, feel free to ask

macneato

Posting Pro in Training

422 posts since Jun 2007

Reputation Points: 46

Solved Threads: 48

Skill Endorsements: 0

3 Years Ago

0

Oh if you dont want to add the javascript to the body of your page, just add docu-ready.

Add the following to your head;

<script>
	        $(document).ready(function() {
	        // This selector is called every time a select box is changed
	        $("select").change(function(){
	            // varible to hold string
	            var str = "";
	            $("select option:selected").each(function(){
	                // when the select box is changed, we add the value text to the varible
	                str += $(this).text() + " ";
	            });
	            // then display it in the following class	
	            $(".display_text_here").text(str);
	        }).change();
	        }); // End Document ready
	    </script>

macneato

Posting Pro in Training

422 posts since Jun 2007

Reputation Points: 46

Solved Threads: 48

Skill Endorsements: 0

3 Years Ago

0

macneato, your first suggestion worked like a charm. However, i used this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

instead of uploading the .js file to my webapp folder. is that OK or should i put the .js file on my web server?

Also, I had another script running on the page and when i added this one the page was reloading over and over again so i took out the other script - is there an easy way get both to work?

Thanks so much!!

fielding

Newbie Poster

10 posts since Jan 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

Hi fielding,

Would it be possible for you to attach a copy of your source (mainly the other script) so i can see whats causing the conflict

macneato

Posting Pro in Training

422 posts since Jun 2007

Reputation Points: 46

Solved Threads: 48

Skill Endorsements: 0

3 Years Ago

0

macneato,

here are the (now 3) scripts im trying to implement on 1 page:

$(document).ready(function() {
        var data = <%Product.ImageObject%>;
        var rel = (data.gallery.length > 1) ? 'prettyPhoto[products]' : 'prettyPhoto';
        var displayHolder = $("#gallery-main");
        var galleryHolder = $("#gallery-other");

        writeImage(displayHolder, data.active, data.active.display, rel);

        for (i = 1; i < data.gallery.length; i++) {
          writeImage(galleryHolder, data.gallery[i], data.gallery[i].thumbnail, rel, 50);
        }

        $("a[rel^='prettyPhoto']").prettyPhoto();
      });

      function writeImage(galleryHolder, image, displayImage, rel, resize) {
        var html = '';
        style = (resize) ? "width:" + resize + "px" : "";

        html += '<a href="' + image.detailed + '" rel="' + rel + '" title="' + image.title + '" style="margin:2px">';
        html += '<img src="' + displayImage + '" alt="' + image.alt + '" title="Click to enlarge" style="' + style + '" />'
        html += '</a>';

        galleryHolder.append(html);
      }

$(document).ready(function() {
       
                  var str = "";
                  $("select option:selected").each(function () {

                        str += $(this).text() + " ";
                      });
         
                  $(".display_text_here").text(str);
                })
                .change();

would like this one only to work when the user is on IE

$(document).ready(function() {

    $(".select")

        .mouseover(function(){
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto");
        })

        .change(function(){
            $(this).css("width", $(this).data("origWidth"));
        });

});

Your help has been AWESOME, thanks!

fielding

Newbie Poster

10 posts since Jan 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

Got it figured out, i did each one individually and it worked! Thanks again for your help!

fielding

Newbie Poster

10 posts since Jan 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

Question Answered as of 3 Years Ago by macneato and parry_kulk

How to use jQuery to display text from a selected item in a select box.

This question has already been solved: Start a new discussion instead