드롭 다운 목록에 따라 JQuery로 div 표시/숨기기 선택 값

기존 질문을 읽었지만 문제가 해결되지 않는 것 같습니다. 드롭 다운 목록에서 "Openeded"옵션을 선택하면 div "answer_wrapper"를 숨길 수 있습니다.드롭 다운 목록에 따라 JQuery로 div 표시/숨기기 선택 값

일부 코드는 작성했지만 솔루션을 실행하면 드롭 다운 목록에서 "종료 됨"옵션을 선택할 때 아무 것도 나타나지 않습니다.

도움을 주시면 감사하겠습니다.

$(function() 
{ 
    $("#QuestnType").change(function() 
    { 
     ToggleDropdown(); 
    }); 
    ToggleDropdown(); 
}); 
function ToggleDropdown() 
{ 
    if ($("#QuestnType").val() == "Open Ended") 
    { 
     $("#answer_wrapper").hide(); 
    } 
    else 
    { 
     $("#answer_wrapper").show(); 
    } 
};

드롭 다운 목록

<asp:DropDownList runat="server" ID="QuestnType" CssClass="form"> 
    <asp:ListItem Value="1">Check Boxes</asp:ListItem> 
    <asp:ListItem Value="2">Drop Down</asp:ListItem> 
    <asp:ListItem Value="3">Open Ended</asp:ListItem> 
    <asp:ListItem Value="4">Radio Buttons</asp:ListItem> 
</asp:DropDownList> 
<div id="answer_wrapper"> 
    some code here 
</div>

는 어디서 잘못된 것입니까?

출처

2012-01-10 HGomez90

"종단 열고는"텍스트입니다, 값 값이 서버 ID가 있다는 것입니다주의해야 할 3

if ($("#QuestnType").val() == 3) ...

또는

if ($("#QuestnType").text() == "Open Ended") ...

한 가지입니다! = 클라이언트 ID를. 다른 서버 컨트롤에 드롭 다운이있는 경우 클라이언트 ID가 추악한 자동 생성 웹 폼 클라이언트 ID가됩니다. jquery selector에 클라이언트 ID를 삽입하거나 고유 한 클래스 이름을 사용하여 컨트롤을 선택합니다.

출처

2012-01-10 17:42:47

.text()'는 작동하지 않습니다. – maxedison

그런 다음 val()을 체크하고 3을 확인하십시오 –

마스터 페이지가 드롭 다운 목록의 ID를 변경한다고 말하십시오. 드롭 다운에 클래스 이름을 지정 했으므로 이제는 완벽하게 작동합니다. 감사합니다 – HGomez90

$ ("# QuestnType") val()은 드롭 다운 옵션 (이 경우 3)의 값을 제공합니다.

$ ("# QuestnType") .val() === "3"(좋음) 또는 $ ("# QuestnType") text() === "Openeded".

출처

2012-01-10 17:46:14 Tuan

'.text()'는 작동하지 않습니다. – maxedison

$ ("# QuestnType"). val()은 value 속성의 값을 가져 오기 때문에 작동하지 않습니다. if ($("#QuestnType").val() == 3)으로 변경하면 제대로 작동합니다.

$(function() 
{ 
    $("#<%=QuestnType.ClientID%>").change(function() 
    { 
     ToggleDropdown(); 
    }); 
    ToggleDropdown(); 
});

출처

2012-01-10 17:46:15 maxedison

, 당신은 다른 서버 컨트롤에 포함 된 것 경우에도 자바 스크립트는 서버 컨트롤의 올바른 ID를 참조하는 것을 보장하기 위해 다음을 사용할 수 있습니다 컨트롤 ID가 (때문에 마스터 페이지를 접두사로) 변경되지 않습니다 보장,이 바이올린의 접근이 유형의 도움이 될 수 있습니다

기본적으로 http://jsfiddle.net/dhoerster/MZKBJ/1/

가 여기에 자바 스크립트의 모습입니다 :

$(function() 
{ 
    $("#QuestnType").change(function() 
    { 
     ToggleDropdown(); 
    }); 
    ToggleDropdown(); 
}); 
function ToggleDropdown() 
{ 

    if ($("#QuestnType").val() === "3") 
    { 
     alert($('#QuestnType').val()); 
     $("#answer_wrapper").hide(); 
    } 
    else 
    { 
     alert($('#QuestnType').val()); 
     $("#answer_wrapper").show(); 
    } 
};

출처

2012-01-10 17:49:17 kleezy