jQuery select 옵션에서 div를 토글합니다.

드롭 다운 선택 옵션 상자에서 div를 토글해야합니다. 그것과 비슷한 싶습니다 asmselect jquery 대신 옵션 태그를 나열하는 숨겨진 div 표시 싶습니다. 이게 뭐니? 아니면 그것을 설정하는 방법을 아는 사람이 있습니까? 고마워, 제프. jQuery select 옵션에서 div를 토글합니다.

기본적으로 내가 원하는 것은 div의 토글 대신 목록을 생성하지만 위의 asmselect 링크의 모양과의 상호 작용이

업데이트되었습니다. 아래 예제 코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jQuery1.3.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $("#theSelect").change(function(){   
     $("#theSelect option:selected").click(function(){ 
      var value = $(this).val(); 
      var theDiv = $(".is" + value); 

      $(theDiv).toggle(function(){ 
       $(this).removeClass("hidden"); 
      }),function(){ 
       $(this).addClass("hidden"); 
      } 
     }); 
    }); 

}); 

</script> 
<style type="text/css"> 
.hidden { 
    display: none; 
} 
</style> 
</head> 

<body> 
    <div class="selectContainer"> 
     <select id="theSelect"> 
      <option value="">- Select -</option> 
      <option value="Patient">Patient</option> 
      <option value="Physician">Physician</option> 
      <option value="Nurse">Nurse</option> 
     </select> 
    </div> 
    <div class="hidden isPatient">Patient</div> 
    <div class="hidden isPhysician">Physician</div> 
    <div class="hidden isNurse">Nurse</div> 
</body> 
</html>

출처

2010-05-04 Jeffrey

약간 m 일 수 있습니까? 귀하의 요구 사항에 맞는 광석? 네가 요구하는대로 따라갈 지 모르겠다. – gurun8

게시물을 업데이트했습니다. – Jeffrey

이와 비슷한 제품을 찾고 계셨습니까?

$("#theSelect").change(function() {   
    var value = $("#theSelect option:selected").val(); 
    var theDiv = $(".is" + value); 

    theDiv.slideDown().removeClass("hidden"); 
    theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); }); 
});

선택 옵션 변경, 당신

이 slideDown()로 선택 div을 공개하고 hidden 클래스를 제거 http://jsfiddle.net/tYvQ8/.
클래스 이름에 "is"가있는 형제 인 div을 찾습니다. (메뉴가 형제가 아니었다면 쉽게합니다.)
가 slideUp() 후 hidden 클래스를 추가하는 콜백 소요 slideUp(), 함께 이전에 표시된 형제 숨기기

여기에 완료 내에서 (또 다른입니다 의견, 더 나은) 방법 :http://jsfiddle.net/tYvQ8/1/

hidden 클래스를 제거하고 jQuery를 사용하여 클래스를 숨 깁니다. 그렇다면 클래스 추가 및 제거에 대해 걱정할 필요가 없습니다.

앞서 언급 한 바와 같이 숨겨진 클래스

<body> 
    <div class="selectContainer"> 
     <select id="theSelect"> 
      <option value="">- Select -</option> 
      <option value="Patient">Patient</option> 
      <option value="Physician">Physician</option> 
      <option value="Nurse">Nurse</option> 
     </select> 
    </div> 
    <div class="isPatient">Patient</div> 
    <div class="isPhysician">Physician</div> 
    <div class="isNurse">Nurse</div> 
</body>

jQuery를

$('[class^=is]').hide(); 

$("#theSelect").change(function(){   
    var value = $("#theSelect option:selected").val(); 
    var theDiv = $(".is" + value); 

    theDiv.slideDown(); 
    theDiv.siblings('[class^=is]').slideUp(); 
});

출처

2010-05-14 12:12:51 user113716

이것은 작동합니다. 그레지! – Jeffrey

이제 asmselect 플러그인처럼 보이도록 여러 div를 표시하고 선택기에서 비활성화하도록 추가하려고합니다. 어떤 아이디어? – Jeffrey

목록 옵션과 div 태그는 동일한 방법으로 식별하고 토글 할 수 있습니다.

$ ('# div_id'). toggle();

대신 요소 선택기를 사용하여 참조한 asmselect 플러그인과 같은 옵션 태그를 선택하는 대신 요소 선택기를 수정하여 페이지에서 div 태그를 선택하십시오.

출처

2010-05-04 17:04:46 Jeremy

감사합니다. Jeremy. 나는 그것을 작동시키지 못한다. 위의 코드를 살펴 봐도 될까? – Jeffrey

사실,이 코드는 좋아 보이고 작동하게 만들 수있었습니다. 보고있는 오류가 무엇입니까? 내 유일한 제안은 theDiv를 정의하는 선을 요소 객체 대신 문자열로 변경하는 것이 었습니다.예 : var theDiv = ".is"+ value; 이렇게하면 $ (theDiv)를 호출했을 것입니다. 그러나 내가 말했듯이, 당신의 방식은 나를 위해 잘 작동했습니다. 오류를 게시하고 어떤 브라우저를 사용하고 있는지 그리고 아마도 다른 제안을 제공 할 수 있습니다. – Jeremy

Mozilla에서 작동하지만 webkit에서는 작동하지 않습니다. – Jeffrey

사용 .change()없이 HTML,하지만 jQuery의 .show() 및/또는 .hide와() 방법 :

if($(this).val() == 'selected_option') { 
     $('.selector1').show(); //displays element with display:none;   
    } else { 
     $('.selector1').hide(); //hides element again 
    }

출처

2017-06-17 10:45:38 TomoMiha

jQuery select 옵션에서 div를 토글합니다.

답변

관련 문제