Как остановить div от скрытия при нажатии кнопки отправки?

Question

У меня есть выпадающий список со значениями «AAA» и «BBB». При выборе «AAA» он отображает скрытый div, который имеет два текстовых поля и кнопку отправки. Проблема для меня - когда я заполняю данные в текстовом поле и нажмите на кнопку отправить, загрузки страницы и DIV disappears.I вы не хотите использовать DIV, чтобы быть hidden.Can кто-нибудь сказать мне, что я делаю неправильно, пожалуйста, предоставить мне пример, если possble.Thanks заранее

выпадающий список

<select id= "purpose" name="purpose" size="50px" style="margin-top:30px"> 

<option value="1" 
    <% 
    if request.form("purpose") = "1" then 
     response.write("selected") 
     end if %> 
     >SELECT</option> 
      <option value="2" 
      <% 
    if request.form("purpose") = "2" then 
     response.write("selected") 
     end if %> 
     >AAA</option> 
    <option value="3" 
    <% 
     if request.form("purpose") = "3" then 
     response.write("selected") 
    end if %> 
    >BBB</option> 
    </select> 
     </div> 

Script, чтобы показать/скрыть Div

$(document).ready(function() { 
     $('#purpose').on('change', function() { 
      if (this.value == "1") { 
       $(".AAA").hide(); 
       $(".BBB").hide(); 
       } 
      else { } 
      if (this.value == '2') 
      { 
       $(".AAA").show(); 
     } 
      else { 
       $(".AAA").hide(); 

       } 
      if (this.value == '3') { 
       $(".BBB").show(); 
       } 
      else { 
       $(".BBB").hide(); 
       } 
     }); 
    }); 

Answer 1

Я думаю, что проблема на странице загрузке видимости DIV не устанавливаются на основе выбранной опции для этого одного раствора вручную вызвать событие изменения, так что видимость DIV может быть установлена ​​на основе выбранной опции

$(document).ready(function() { 
    $('#purpose').on('change', function() { 
     if (this.value == "1") { 
      $(".AAA").hide(); 
      $(".BBB").hide(); 
     } else {} 
     if (this.value == '2') { 
      $(".AAA").show(); 
     } else { 
      $(".AAA").hide(); 

     } 
     if (this.value == '3') { 
      $(".BBB").show(); 
     } else { 
      $(".BBB").hide(); 
     } 
    }).change(); 
}); 

---

весь ваш сценарий может быть упрощена, как показано ниже, используя .toggle()

$(document).ready(function() { 
    $('#purpose').on('change', function() { 
     $(".AAA").toggle(this.value == '2'); 
     $(".BBB").toggle(this.value == '3'); 
    }).change(); 
});