Jquery 如何阻止div在单击提交按钮时隐藏？

我有一个值为“AAA”和“BBB”的下拉列表。选择“AAA”时，它会显示一个隐藏的div，其中有两个文本框和提交按钮。我的问题是，一旦我在文本框中填写数据并单击提交，页面就会加载，div就会消失。我不想隐藏div。谁能告诉我我做错了什么，如果可能的话，请给我举个例子。提前谢谢

下拉列表

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

---

我认为问题在于页面加载，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();
 });

---

您的整个脚本可以使用

 $(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();
 });

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