Question

I have 3 tabs and 1 combo box in a jsp page. By default Tab 1 is enabled and tab2 and tab3 are in disabled mode , When i will select term one(in drop down item) then automatically i am going to 1st tab and if please select option is choosen then tab2 and tab3 will be disabled

Here is the fiddle: http://jsfiddle.net/AavsW/21/

but what i want is if i will select term one(in drop down item) then i want to go to tab3 that is order of tabs and drop down items need not to be in the same way. Should i use data-tabid=""? How can i implement it? Any help is appreciated

Answer 1

Its quite difficult to know exactly what your want because your question is difficult to read and understand… but you can easily change which tab is selected on change of the selection option … your current HTML is this :

<select name="porting-p1" class="dropdown">
   <option value="1" class="disablenext">Please select an option...</option>
   <option value="2" class="enablenext">TERMS 1</option>
   <option value="3" class="enablenext">TERMS 2</option>
</select>

And your jQuery onchange function does this :

// enable tab
$('#wizard').tabs('enable', $('.dropdown').val());
// select tab
$('#wizard').tabs('select', $('.dropdown').val());

what this does is take the value from your option and enable and select the matching tab … so to change the order just change the value in your HTML :

<select name="porting-p1" class="dropdown">
   <option value="1" class="disablenext">Please select an option...</option>
   <option value="3" class="enablenext">TERMS 1</option>
   <option value="2" class="enablenext">TERMS 2</option>
</select>

See here

You will notice here that if you select TERMS 1 you will go to tab 3 as the value specified in the option for TERMS 1 is 3 ….