CODEWITHSUNDEEP
jquery
echo_Me
echo_Me

Reputation: 37243

how to get the text of select options?

i have this code , and im currently getting the 'mytablevalues' but i wonder if i can get 'myvalues' , i mean only the text of the select. 

 <form id="aform" method="post">
 <select id="menucompare" name ="menucompare" size="1">
<option value="nothing" <?php if ($menucompare == "nothing") { echo " selected='selected'"; } ?>>Select one</option>

<option value="mytablevalue1" <?php   if ($menucompare == "mytablevalue1") { echo " selected='selected'"; } ?> >myvalue1</option>
<option value="mytablevalue2" <?php   if ($menucompare == "mytablevalue2") { echo " selected='selected'"; } ?> >myvalue2</option>
<option value="mytablevalue3" <?php   if ($menucompare == "mytablevalue3") { echo " selected='selected'"; } ?> >myvalue3</option>
<option value="mytablevalue4" <?php if ($menucompare == "mytablevalue4") { echo " selected='selected'"; } ?> >myvalue4</option>


</select>
<input type="hidden" name="hidevalue" value="<?php echo $menucompare ;  ?>" />
<noscript><input type="submit" value="Submit"></noscript>
</form>

<script type="text/javascript">

   $(document).ready(function(){
    $("select").change(function() { 
         displayVals(); 
   });
   displayVals();
 });

function displayVals() {
var singleValues = $("#menucompare").val();
$("#hiddenselect").val(singleValues);
$("p").html("Procent of :    " + singleValues);
}

and also im having trouble with default value (nothing). any suggest !

EDIT . i get it to work like that

   <script type="text/javascript">

  $(document).ready(function(){
   $("select").change(function() { 
         displayVals(); 
   });
   displayVals();
   });

  function displayVals() {
var singleValues = $("select option:selected").text();
$("#hiddenselect").val(singleValues);
$("p").html("Procent of : &nbsp &nbsp" + singleValues);
 }

</script>

Upvotes: 0

Views: 309

Answers (3)

billyonecan
billyonecan

Reputation: 20270

use .text() to get the text values of your options: http://api.jquery.com/text/

To get the text of the selected option you can use:

$('#menucompare option:selected').text()

http://api.jquery.com/selected-selector/

example

<script type="text/javascript">
 $(document).ready(function() {

   $("#menucompare").change(function() { 
     $("p").html("Procent of : " + $("option:selected", this).text());  
     $('input[name="hidevalue"]').val($("option:selected", this).text());  
   });

 });
</script>

$('#hiddenSelect') doesn't appear to exist in the example you posted, I've assumed that you're trying to set the value of the input with name hidevalue, I've included this change in the example above.

Another thing, there is no <p> in your example (unless you left it out?). I would suggest giving the <p> an id and select that to change it, otherwise the value of every single <p> on your page will be changed.

Upvotes: 2

BrandonS
BrandonS

Reputation: 932

You can simply use jQuery to do that too, use this (for the example above)

$("#menucompare option:selected").text();

Upvotes: 1

chapkom
chapkom

Reputation: 54

This will give you the text of the selected option:

$('#menucompare').children("option[value='" + $('#menucompare').val() + "']").text();

Upvotes: 0

Related Questions