Member Avatar for fielding

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!

  • 4 Contributors
  • 8 Replies
  • 3K Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by ololol
Member Avatar for parry_kulk

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()
Member Avatar for macneato

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

Member Avatar for macneato

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>
Member Avatar for fielding

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

Member Avatar for macneato

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

Member Avatar for fielding

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!

Member Avatar for fielding

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

Member Avatar for ololol 
<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>
Edited by ololol because: adf
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.