CODEWITHSUNDEEP
jqueryajaxhtml-select
matthewb
matthewb

Reputation: 3476

jquery and setting range of values

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

Upvotes: 1

Views: 2439

Answers (3)

S Pangborn
S Pangborn

Reputation: 12739

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.

Upvotes: 1

kon
kon

Reputation: 554

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);

Upvotes: 3

Tim Ebenezer
Tim Ebenezer

Reputation: 2724

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

Upvotes: 0

Related Questions