양식을 제출

Question

<div class="container"> 
       <div class="row">  
        <div class="col-xs-8 col-xs-offset-2"> 

         <div class="input-group"> 
          <div class="input-group-btn search-panel"> 

           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
            <span id="search_concept">Filter</span> <span class="caret"></span> 
           </button> 
           <ul class="dropdown-menu" role="menu"> 
            <li><a href="#Electronics">electronics</a></li> 
          <li><a href="#Movies">movies</a></li> 

            <li class="divider"></li> 
            <li><a href="#all">All</a></li> 
           </ul> 
          </div> 
        <form method="POST" name="form" action="#"> 

           <input type="hidden" name="search_param" value="all" id="search_param">   
           <input type="text" class="form-control" name="x" id="query" placeholder="Search term..."> 
           <span class="input-group-btn"> 
            <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
         </span> 

        </form> 
         </div> 

        </div> 
        </div> 
       </div> 

ISSUE I 버튼 이동을 누릅니다 매번; 동일한 페이지로 리디렉션됩니다. 그러나 내가 원하는 것은 펑키 한 드롭 다운 작. 양식을 제출 한 후에 '필터'버튼을 드롭 다운 메뉴의 적절한 필터로 대체하지 않는 것처럼 말입니다. 여기에 대한 코드가 있습니다. 그러나 나가 가기 전에 그것은 예상대로 작동합니다. 무슨 일이 일어날 수 있니?

<script> 
     $(document).ready(function(e){ 
       $('.search-panel .dropdown-menu').find('a').click(function(e) { 
       e.preventDefault(); 
       var param = $(this).attr("href").replace("#",""); 
       var concept = $(this).text(); 
       $('.search-panel span#search_concept').text(concept); 
       $('.input-group #search_param').val(param); 
       }); 
      }); 

    </script> 

JS 바이올린 : https://jsfiddle.net/0e37tvyx/

Answer 1

이에 아무 문제가 없습니다. 귀하의 바이올린 코드는 모든 UI 변경 작업에 잘 작동합니다. 그러나 양식이 POST 메소드를 지원하므로 모든 양식 매개 변수는 POST 요청으로 제출됩니다. 당신은 세 가지 옵션 (너무 그 이상을 할 수있다) 마지막으로 선택한 필터의 상태를 유지해야한다 : 대신 형태의

1. 사용 아약스 요청이 전체 페이지 새로 고침과 함께 제출합니다. 이 방법으로 페이지의 서버 응답에 컨텐츠를 추가해야합니다. 검색 결과입니다.

2. 콘텐츠가 동적으로 생성되는 경우. 즉, PHP/JSP/ASP/Any Other Templating Library을 사용 중이라면 검색 요청에 따라 HTML 코드 (예 : search_param 요청 매개 변수)를 업데이트 할 수 있습니다.

3. 다른 방법은 쿠키를 사용하는 것입니다. 프런트 엔드에서 옵션을 변경하면 쿠키에 필터 옵션 search_param이 보존됩니다. 그리고 ready 문서의 상태; 저장된 쿠키가있는 경우 해당 쿠키를 읽거나 아직 쿠키에 저장되어 있지 않은 경우 기본 옵션 all으로 대체합니다.

쿠키 기반 구현 방법을 확인하십시오. jQuery의 쿠키 플러그인을 추가하지 않았습니다.

https://jsfiddle.net/ksbora/3w6k171f/2

참고 : Cookies도 및 크로스 사이트 발신 제한 크기 제한이 있습니다. 따라서 어떤 옵션을 선택하는지주의하십시오.