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

Question

fielding 0 Newbie Poster

14 Years Ago

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!

display javascript jquery select

4 Contributors
8 Replies
3K Views
5 Years Discussion Span
Latest Post 8 Years Ago Latest Post by ololol

All 8 Replies

parry_kulk 14 Junior Poster

14 Years Ago

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()

macneato 29 Posting Pro in Training

14 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

macneato 29 Posting Pro in Training · Answer 1 · 2010-02-01T22:16:40+00:00

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>

fielding 0 Newbie Poster · Answer 2 · 2010-02-05T01:42:43+00:00

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!!

macneato 29 Posting Pro in Training · Answer 3 · 2010-02-08T13:02:08+00:00

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

fielding 0 Newbie Poster · Answer 4 · 2010-02-09T04:11:45+00:00

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 0 Newbie Poster · Answer 5 · 2010-02-10T23:26:45+00:00

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

ololol 0 Newbie Poster · Answer 6 · 2015-06-11T06:01:34+00:00

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1007439566;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1007439566/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

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

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers