복제 효과는

Question

은 현재 내가이 HTML이 div에합니다 :

<div class="limit"> 
     <select onchange="location = this.value;"> 
     <option value="http://example.net/mycategory?limit=24" selected="selected">24</option> 
     <option value="http://example.net/mycategory?limit=48">48</option> 
     <option value="http://example.net/mycategory?limit=72">72</option> 
     <option value="http://example.net/mycategory?limit=96">96</option> 
     <option value="http://example.net/mycategory?limit=120">120</option> 
     <option value="http://example.net/mycategory?limit=9999">ALL</option> 
     </select> 
    </div> 

내의 .js에서

가 사용하는 파일이 하나

가

if ($(".limit select").length) { 
    $(".limit select").get(0).onchange = null; 
    $(".limit select").change(function() { 
     $("#filterpro_limit").val(gUV($(this).val(), "limit")); 
     iF() 
    }); 
} 

무엇 내가 실제로 원하는 것은 옵션을 보여주는 것입니다

<div class="limit"> 
     <div data-value="http://example.net/mycategory?limit=24">24</div> 
     <div data-value="http://example.net/mycategory?limit=48">48</div> 
     <div data-value="http://example.net/mycategory?limit=72">72</div> 
     <div data-value="http://example.net/mycategory?limit=96">96</div> 
     <div data-value="http://example.net/mycategory?limit=120">120</div> 
     <div data-value="http://example.net/mycategory?limit=9999">ALL</div> 
    </div> 

및 SOMET를 사용하는 JS에서 : 드롭 다운의 외부 행의 선택에, 그래서 내 생각은 위의 HTML을 제거하고이 중 하나를 사용하십니까했다

if ($(".limit div").length) { 
     $(".limit div").get(0).onclick = null; 
     $(".limit div").click(function() { 
      $("#filterpro_limit").val(gUV($(this).val(), "limit")); 
      iF() 
     }); 
    } 

을하지만, 어떻게 든 내가 유사한 효과가 제대로 작동하려면 JS를 걸 수없는 경우 다음과 같이 힝. 어떤 도움을 주시면 감사하겠습니다!

Answer 1

corercted해야 몇 가지 실수가 있습니다 :

• $(".limit div")이 그렇게 당신이 필요로하는 클래스 limit이있는 요소 내에 모든 div의를 얻을 수 있기 때문에 여기에 잘못이 모든 선택의 첫 번째 원하는 div를 얻으려면 $("div.limit")으로 변경하십시오. 당신은 그것이 input 또는 select 아니기 때문에 .val()이없는 div 요소에 $(this).val()를 사용하는

• , 당신은 올바른 선택과 함께 $(this).attr("data-value")로 변경해야합니다.

• 그리고 당신은 $("div.limit div")을 사용하고이 selctor에 .get(0)를 사용할 필요가 없습니다하셔야합니다 .limit DIV 안에 DIV 옵션을 얻을 수있는 올바른 선택에 대해 말하기.

  if ($("div.limit").length) { 
      $("div.limit div").onclick = null; 
      $("div.limit div").click(function() { 
       $("#filterpro_limit").val(gUV($(this).attr("data-value"), "limit")); 
       iF() 
      }); 
  } 
  

  참고 :

그래서 코드는 다음과 같이 변경해야

그리고 당신이 그것을 얻기 위해 .limit 사업부와 그 아이의 스타일을 변경해야합니다 있습니다 드롭 다운으로 작동합니다.

Answer 2

직접 작성하는 것이 좋습니다 만 https://select2.github.io/을 볼 수 있습니다. 그것이 당신이 원하는 것이지만 그 다음엔 더 친절합니다 ;-). 여기 코드는 다음과 같습니다

<script type="text/javascript"> 
$(document).ready(function() { 
    var $example = $(".js-example-programmatic").select2(); 
    $(".js-programmatic-set-val").on("click", function() { $example.val("AL").trigger("change"); }); 
}); 
</script> 

<select class="js-example-programmatic"> 
    <option value="AL">Alabama</option> 
    ... 
    <option value="WY">Wyoming</option> 
</select> 

<button class="js-programmatic-set-val btn btn-default">Set "Alabama"</button> 

더 많은 정보는 여기에서 찾을 수 있습니다 : https://select2.github.io/examples.html#programmatic

Answer 3

가 그래서 코드가

if ($(".limit div").length) { 
     $(".limit div").get(0).onclick = null; 
     $(".limit div").click(function() { 
      $("#filterpro_limit").text(gUV($(this).data('value'), "limit")); 
     }); 
    } 

가 있다고 가정해야한다 div 사용 .text() 대신 .val() 내부의 값을 얻으려면 iF()은 사용자가 생성 한 function입니다. 현재 코드에서