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

Question

我有一个下拉列表，其中包含值＆＃34; AAA＆＃34;和＆＃34; BBB＆＃34;。选择＆＃34; AAA＆＃34;，它显示一个隐藏的div，它有两个文本框和提交按钮。我的问题是我填写文本框中的数据并单击提交，页面加载，div消失。我不想隐藏div。任何人都可以告诉我我做错了什么，请提供一个例子如果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>

显示/隐藏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();
               }
        });
    });