Question

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>

Answer 1

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.