Как показать вкладку на основе значения тега SELECT в JSP?

Question

Привет, я создал страницу JSP. Первая вкладка содержит поле SELECT. На основе выбранного значения я хочу показать следующую вкладку. Кто-нибудь может мне помочь? Я много раз пробовал, но я не получаю.

<div class="navbar btn-navbar"> 
     <div id="tabs" class="tabbable"> 
      <ul id="myTab" class="nav nav-tabs"> 
       <li class="active"><a href="#datacollector" target="main" 
        data-toggle="tab">Data Collector</a></li> 
       <li class="hidden"><a href="#fromDB" target="main" 
        data-toggle="tab">Data Load</a></li> 
       <li class="hidden"><a href="#fromFile" target="main" 
        data-toggle="tab">Data Load</a></li> 
       <li class="hidden"><a href="#email" target="main" 
        data-toggle="tab">Data Load</a></li> 
       <li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data 
         Map</a></li> 
       <li><a href="#schedule" target="main" data-toggle="tab">Schedule</a></li> 
      </ul> 
      <br> <br> <br> 
      <div id="myTabContent" class="tab-content"> 
       <div class="tab-pane fade in active" id="datacollector"> 
        <div class="container"> 
         <div class="row"> 
          <div class="span8"> 
           <form name="selectType" action="selectType" 
            onsubmit="return validateForm()" target="#fromDB" method="get"> 
            <fieldset> 

             </select> <label class="control-label" for="dataloadType">Data 
              load Type:</label> <select id="dataloadType" name="dataloadType"> 
              <option>Choose Data load Type</option> 
              <option value="fromDB">From Database</option> 
              <option value="fromFile">From File</option> 
              <option value="email">E-mail</option> 
              <option value="webServices">Web Services</option> 
             </select> 
             <p> 
              <button id="nexttab" type="submit" class="btn btn-success">Submit</button> 
             </p> 
            </fieldset> 
           </form> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="tab-pane fade" id="fromDB"> 
        <iframe src="GenericFileUpload.jsp" width="1250" height="400"></iframe> 
       </div> 
       <div class="tab-pane fade" id="fromFile"> 
        <iframe src="GenericDB.jsp" width="1250" height="400"></iframe> 
       </div> 
       <div class="tab-pane fade" id="email"> 
        <iframe src="EmailService.jsp" width="1250" height="400"></iframe> 
       </div> 
       <div class="tab-pane fade" id="datamap"> 
        <iframe src="DataFieldMapping.jsp" width="1250" height="400"></iframe> 
       </div> 
       <div class="tab-pane fade" id="schedule"> 
        <iframe src="UploadConfiguration.jsp" width="1250" height="400"></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 

Если пользователь выбирает из файла он должен показать следующую вкладку с идентификатором FromFile, а также он должен скрыть вкладки с идентификаторами fromDB и электронной почты. Кто-нибудь может мне помочь? Как с помощью JQuery?

Answer 1

How to make a DIV visible and invisible with JavaScript

Просто дополнения к этому:

OnChange событие должно быть зарегистрировано с помощью функции Java-скриптов. Эта функция будет считывать текущее выбранное значение в окне выбора.

Основываясь на значении, сделайте только видимый div, который необходим, оставите все для скрытия.

Answer 2

$('#dataloadType').live('change',function(){ 
    var value = $(this).val(); 
    $('#tabs').tabs('select',value); 
});