Question

Hei friends.
I’ve got a problem with getting the max and min value from select box(html).
I want to get MAX AND MIN value from selectbox with jquery or javascript.

Here is the markup, simple range slider.

$('#slider').slider({
        range: true,
        min: 0,//HERE I WANT TO GET VALUES
        max: 40,
        step: 10, // Use this determine the amount of each interval
        values: [ 20, 40 ], // The default range
        slide: function( event, ui ) {
          // for input text box
          $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
          // Display and selected the min Price
          $( "#my_min" ).val(ui.values[ 0 ]);
          // Display and selected the max Price 
          $( "#my_max" ).val(ui.values[ 1 ]); 
    }
});

I want to get them from the select box, select box will be dynamicly filled by PHP.
Here is the code:

<select id="my_min" class="price_range">
<?php //dynamicly filled options 

         while($row=mysql_fetch_array($query))
            {echo "<option>".$row['values']."</option>";}


?>
</select>

Thanks for help.

Answer 1

Your question is ambiguous. Two ways of interpreting:

1. You want javascript to know the min and max value of the selectbox.

You can use:

 var options = document.getElementById('yourselectbox').childNodes;
 var min = 999999999;
 var max = 0;
 for(var i = 0; i < options.length; i++) {
     if(options[i].value > max) max = options[i].value;
     if(options[i].value < min) min = options[i].value;
 }

2. You want the server to know javascripts max and min value.

The DOM is built by the server, i.e. it builds the HTML. The HTML includes the javascript which defines the min value and the max value. When data is sent back to the server via a POST, only the SET value will be send. Normally, the min and max value won’t matter to the server. If you want the min and max values to be sent, you have to make hidden input fields containing those values. However, why would you? You define the min and max value don’t you?

— edit —

var options = document.getElementById('yourselectbox').childNodes;
var min = 999999999;
var max = 0;
for(var i = 0; i < options.length; i++) {
    if(options[i].value > max) max = options[i].value;
    if(options[i].value < min) min = options[i].value;
}
$('#slider').slider({
        range: true,
        min: min,
        max: max,
        step: 10, // Use this determine the amount of each interval
        values: [ 20, 40 ], // The default range
        slide: function( event, ui ) {
          // for input text box
          $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
          // Display and selected the min Price
          $( "#my_min" ).val(ui.values[ 0 ]);
          // Display and selected the max Price 
          $( "#my_max" ).val(ui.values[ 1 ]); 
    }
});