jQuery 또는 javascript를 사용하여 검색 양식 옵션을 유지하기위한 URL 매개 변수를 가져옵니다.

추가 처리를 위해 URL 문자열을 설정하는 검색 필터 세트가 있습니다. 결과를 표시하기 위해 페이지를 다시로드하면 사용자가 선택한 옵션이 손실됩니다. jQuery를 사용하여 url에서 매개 변수를 캡처하고 옵션이 선택되었는지 '기억'할 수 있는지 궁금합니다.jQuery 또는 javascript를 사용하여 검색 양식 옵션을 유지하기위한 URL 매개 변수를 가져옵니다.

예를 들어 내 URL에 www.something.com/index.html이 포함되어 있습니까? & 색상 = 빨간색 & 원 = 1 & 스타 = 0, 내 양식은 다음과 같이로드합니다 :

<h3>Colour</h3> 
<p>Blue: <input name="colour" type="radio" value="blue" /></p> 
<p>Red: <input name="colour" type="radio" value="red" /></p> [selected] 
<p>Green: <input name="colour" type="radio" value="green" /></p> 

<h3>Shape</h3> 
<p>Circle: <input name="circle" type="checkbox" value="1" /></p> [selected] 
<p>Square: <input name="square" type="checkbox" value="1" /></p> 
<p>Star: <input name="star" type="checkbox" value="1" /></p>

감사보고를 위해.

출처

2011-07-01 Willb

<script type="text/javascript"> 
function getQueryStr(name) { 
    hu = window.location.search.substring(1); 
    gy = hu.split("&"); 
    for (i=0;i<gy.length;i++) { 
     ft = gy[i].split("="); 
     if (ft[0] == ji) { 
      return ft[1]; 
}}} 

$(document).ready(function() { 
    $('input[name=color]').val(getQueryStr("colour")); 
    $('input[name=circle]').prop("checked", (getQueryStr("circle")=="1")); 
    $('input[name=square]').prop("checked", (getQueryStr("square")=="1")); 
    $('input[name=star]').prop("checked", (getQueryStr("star")=="1")); 
}); 
</script>

출처

2011-07-01 15:11:46

내가 가지고있는 것과 잘 어울리는이 옵션이 정말 마음에 듭니다. 그러나 체크 박스 부분이 작동하지만 라디오 버튼을 선택하지 못하는 것 같습니다. – Willb

이것이 최선의 방법인지는 모르겠지만'var whichcolor = querySt ("color") 변수를 사용하여 라디오 버튼 세트를 작동시킬 수있었습니다. \t'그리고 나서'$ ('input [name = color] [value ='+ whichcolor + ']'). attr ('checked', 'checked'); – Willb

다음 JS 객체

location.search

이 귀하의 주소 표시 줄의 쿼리 문자열에 Params 당신에게 줄 것이다 사용할 수 있습니다

이 정보는 추출해야합니다 곳에서 위치 개체 Location in javascript에 개최되는

출처

2011-07-01 15:07:50

매개 변수

출처

2011-07-01 15:09:08

이 기능을 사용하여 URL 매개 변수를 얻을 수있다 (여기 Append urlVariable to next page's link)을 보면 :

function getParameterByName(name) 

    { 
     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
     var regexS = "[\\?&]"+name+"=([^&#]*)"; 
     var regex = new RegExp(regexS); 
     var results = regex.exec(window.location.href); 
     if(results == null) 
     return ""; 
     else 
     return decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 

var colour= getParameterByName('colour'); 
var circle= getParameterByName('circle'); 
var star= getParameterByName('star');

당신이 매개 변수가있을 때 다음 그들을 선택하는 것은 쉽다 :

$('input[name=colour][value='+colour+']').attr('checked', 'checked');

출처

2011-07-01 15:11:30

값으로 선택하는 것은 좋지 않은 생각입니다. 동일한 값이 여러 필드에있는 것이 일반적입니다. –

네 말이 맞아, 나는 그 이름을 그만 두었다! :) –

고마워요. 방금 솔루션을 테스트했지만 양식 값이 선택되지 않았습니까? – Willb

이 아니라면 클라이언트 측에서이 작업을 수행해야하는 특별한 이유는 다음과 같습니다.

일반적으로 서버 측 에서 완료. 서버 측에서 매개 변수를 확인할 수 있으며 (아마도 어쨌든 그렇게 함) 미리 선택된 체크 박스가있는 HTML 마크 업을 클라이언트로 다시 보냅니다.

더하기 측면에서,이 기능은 검색 엔진뿐만 아니라 자바 스크립트가 비활성화 된 브라우저에서도 작동합니다.

출처

2011-07-02 12:02:15 marapet

jQuery 또는 javascript를 사용하여 검색 양식 옵션을 유지하기위한 URL 매개 변수를 가져옵니다.

답변

관련 문제