0

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
30
Views
7 Years
Discussion Span
Last Post by ololol
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()
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

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

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

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!

0

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

0
<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: adf

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.