사용자 정의 드롭 다운 메뉴에서 특정 값을 가져 오려고 시도합니다.

사용자 정의 선택 메뉴를 만들려고합니다. (내가 할 수 있는지보고 싶었습니다.) 몇 가지 문제가 있습니다. 사용자가 상자를 클릭하면 사용자가 옵션을 선택하여 해당 상자에 표시되도록 할 수 있습니다. 내가 가지고있는 문제는 선택한 텍스트가 각 메뉴에서 어떤 메뉴를 선택하는지에 관계없이 각 상자에 표시된다는 것입니다. 이 문제를 어떻게 해결할 수 있습니까?사용자 정의 드롭 다운 메뉴에서 특정 값을 가져 오려고 시도합니다.

여기 내 펜이 있습니다.

http://codepen.io/RobbyT15/pen/LIKsJ

선택

<body> 
    <div class="select"> 
     <div class="arrow-down"></div> 
     <div class="option-menu"> 
      <div class="option">Hello</div> 
      <div class="option">Goodbye</div> 
     </div> 
    </div> 

    <div class="select"> 
     <div class="arrow-down"></div> 
     <div class="option-menu"> 
      <div class="option active">A</div> 
      <div class="option">B</div> 
      <div class="option">C</div> 
     </div> 
    </div> 
</body>

스크립트

$(document).ready(function(){ 
    var select = $(".select"); 
    $(select).on("click", function(){ 
     $(this).find(".option-menu").each(function(){ 
      $(this).toggle(); 
     }) 

     $(".option").on("click", function(){ 
      $(".active").removeClass("active"); 
      $(this).addClass("active"); 
      $(select).children("p").remove(); 
      var option = $(this).text(); 
      console.log(option); 
      $(select).prepend("<p>" +option +"<p>"); 
     }) 
    }) 
})

출처

2014-10-15 Anonymous

당신은 요 변수 select

로 다스 려 몇 가지 옵션을 클릭하면

var select = $ (". select");

모든 요소를 select 클래스로 호출하면 더 구체적인 선택자를 만들 수 있습니다. 이 줄을 추가하십시오 :

$(select).on("click", function(){ 
    select = $(this); //ADD THIS 
    $(this).find(".option-menu").each(function(){ 
    $(this).toggle(); 
})

확인 데모 http://codepen.io/anon/pen/GaemF

출처

2014-10-15 20:07:17 DaniP

신난다. 매우 감사합니다. –

당신은이 개 요소에 대한 특정 컨테이너 사업부를

<div class="container1"> 
    <div class="select"> 
     <div class="arrow-down"></div> 
     <div class="option-menu"> 
      <div class="option">Hello</div> 
      <div class="option">Goodbye</div> 
     </div> 
    </div> 
</div> 

var select = $(".container1 .select"); 
    $(select).on("click", function(){ 
     $(this).find(".option-menu").each(function(){ 
      $(this).toggle(); 
     }) 

     $(".container1 .option").on("click", function(){ 
      $(".active").removeClass("active"); 
      $(this).addClass("active"); 
      $(select).children("p").remove(); 
      var option = $(this).text(); 
      console.log(option); 
      $(select).prepend("<p>" +option +"<p>"); 
     }) 
    })

귀하의 문제는 당신이 동일한 클래스를 사용한다을 사용해야합니다. 내가 너라면, 나는이 종류의 코드를 jquery plugin으로 작성한다.

// 플러그인을 사용하면 한 줄의 코드로 코드를 만들 수 있습니다. $ ('# container'). createSelectMenu();

출처

2014-10-15 20:08:55

이 플러그인을 만들고 싶습니다만, 방법에 대한 단서가 없습니다. 아마 나는 그것을 연구해야한다. –

사용자 정의 드롭 다운 메뉴에서 특정 값을 가져 오려고 시도합니다.

답변

관련 문제