jquery - Dropdown validation onchange of start period in javascript -


i wondering how update values in length based on user selects in start period.

for example, if user selects 09:00 - 09:50 start period has options 1-7.

if user selects 10:00 - 10:50 start period has options 1-6.

...

if user selects 17:00 - 17:50 start period has options 1.

how achieve using javascript?

here code far:

http://jsfiddle.net/rmxuh/

<p>   <label>start period</label>   <select onchange="reloadroompreference();" id = "edit_req_start" name="">     <option>09:00 - 09:50</option>     <option>10:00 - 10:50</option>     <option>11:00 - 11:50</option>     <option>12:00 - 12:50</option>     <option>13:00 - 13:50</option>     <option>14:00 - 14:50</option>     <option>15:00 - 15:50</option>     <option>16:00 - 16:50</option>     <option>17:00 - 17:50</option>   </select> </p> <p>   <label>length</label>   <select onchange="reloadroompreference();" id = "edit_req_length" name="">     <option>1</option>     <option>2</option>     <option>3</option>     <option>4</option>     <option>5</option>     <option>6</option>     <option>7</option>   </select> </p> 

something it:

<p>   <label>start period</label>   <select onchange="reloadroompreference();" id = "edit_req_start" name="">     <option value="0">09:00 - 09:50</option>     <option value="1">10:00 - 10:50</option>     <option value="2">11:00 - 11:50</option>     <option value="3">12:00 - 12:50</option>     <option value="4">10:00 - 13:50</option>     <option value="5">14:00 - 14:50</option>     <option value="6">15:00 - 15:50</option>     <option value="7">16:00 - 16:50</option>     <option value="8">17:00 - 17:50</option>   </select> </p> <p>   <label>length</label>   <select onchange="reloadroompreference();" id = "edit_req_length" name="">   </select> </p> 

javascript:

var optionsvalue = [1, 2, 3, 4, 5, 6, 7] //contains values displayed in second dropdown  //populate values (var = 0; < optionsvalue.length ; i++)     $('#edit_req_length').append('<option>' + optionsvalue[i] + '</option>');  //triggered each time change first dropdown $('#edit_req_start').on('change', function(data) {     var options = $(this).children('option');     $('#edit_req_length').empty();     (var = 0; < optionsvalue.length - $(this).val() ; i++)         //this way, don't have empty value         if (i >= optionsvalue.length)             $('#edit_req_length').append('<option>' + optionsvalue[optionsvalue.length - 1] + '</option>');         else             $('#edit_req_length').append('<option>' + optionsvalue[i] + '</option>'); }); 

jsfiddle here: http://jsfiddle.net/hda7f/

but have more values on first dropdown on second, added condition leave @ least 1 item in second dropdown.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -