jquery and setting range of values

Question

I am trying to come up with a way using ajax and jquery to display a range of values for a select box. The first drop down has options that need to talk to a 2nd drop box and that is a range of numbers, I know how to set the value of a drop down to 1 value, but not how set the whole range. By default the dropdowns are being generated by php range function.

Any help would be appreciated.

Update This is not the most elegant, but here is what i have

$('.change').change(function(){
var options='';
var max = $('.change option:selected').attr('title');
var min = $('.change option:selected').attr('id');


for(i=min; i <= max; i++){
    options+='<option value="'+i+'">'+i+'</option>';
}
$('select[name=ticket_qty]').find("option").remove();

$('select[name=ticket_qty]').append(options);


});

I am having trouble pulling the "ID" and "TITLE" for the selected option

Answer 1

You will need to iterate over the items in the select box (element.options) and then set the .selected property on a given property.

In that way you can set multiple selections.

ie. element.options[i].selected = true

Answer 2

If these are numerical values, you might want to look into using the jQuery UI Slider. Otherwise, you'll just need to remove/add options in the select box by appending to the select tag.

On the change event of your first text box, call a function that will modify the options in select box 2, removing values that are no longer viable.

function addValue(value, target) {
  $('<option value="' + value + '">' + value + '</option>').appendTo( target ); 
}

function clearValues (target) {
  $(target).find("option").remove();
}

You would then call the function as follows:

addValue(12,$("#select2 input") );

Note: I haven't tested this code, it's just a general idea of an approach.

Someting to that effect might be useful.

Answer 3

if the list is large you might want to use something like:

var options='';
for(i=1; i <= 1234; i++){
    options+='<option value="'+i+'">'+i+'</option>';
}
$(yourSelect).append(options);