Show | Show에 따라 Div를 숨 깁니다. DropDownList

Question

이 항목은 너무 단순하지만 특정 ListItem에서 div를 표시하는 방법을 알고 있습니까?

내 코드는 다음과 같습니다

<asp:DropDownList ID="dropYesNo" runat="server"> 
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem> 
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="No" Value="0"></asp:ListItem> 
</asp:DropDownList> 

나중에 내가 사업부가에 :이 CSS는 기본적으로 숨겨져 있습니다 div에

<div id="optional"> 
    <p>Please Enter Your Reason</p></br> 
    <asp:TextBox ID="_refuse" runat="server" TextMode="MultiLine" /> 
    </br> 
</div> 

합니다. 사용자가 드롭 다운에서 "아니요"를 선택하면 div가 나타납니다. JavaScript를 사용하여 일반적으로 완료된다는 것을 알고 있지만 어떻게하는지 이해하지 못했습니다.

감사합니다.

P.

또 다른 약간의 관련 질문이 있습니다. SQL 데이터베이스에 테이블이 있으면 사용자라고 부를 수 있으며 이름, ID 열이 있습니다. 전체 열을로드하려면 어떻게로드합니까? 사용자가 이름을 선택하면 해당 열은 ID입니다. JQuery와에게 사업부의 숨기고 보여주는를 사용

는

Answer 1

꽤 정직 :

$(function() { 
    $("#dropYesNo").change(function() { 
    ToggleDropdown(); 
    }); 
    ToggleDropdown(); // Done to ensure correct hiding/showing on page reloads due to validation errors 
}); 

function ToggleDropdown() { 
    if ($("#dropYesNo").val() == "No") { 
    $("#optional").show(); 
    } else { 
    $("#optional").hide(); 
    } 
}; 

데이터베이스 측면은 정말 당신이 사용하고 일반적으로 서버 측을 할 것입니다 플랫폼에 따라 달라집니다. Text 및 Value 속성, Text = Name, Value = ID를 지정하는 방법을 이미 알고 있습니다.

Answer 2

if (document.addEventListener) { 
    document.getElementById('dropYesNo').addEventListener('change', function (e) { 
     if (this.value === "0") { 
      document.getElementById('optional').style.display = "block"; 
     } else { 
      document.getElementById('optional').style.display = "none"; 
     } 
    }, false); 
} else { 
    document.getElementById('dropYesNo').attachEvent('onchange', function (e) { 
     if (this.value === "0") { 
      document.getElementById('optional').style.display = "block"; 
     } else { 
      document.getElementById('optional').style.display = "none"; 
     } 
    }); 
} 

See example here.

Answer 3

<asp:DropDownList ID="dropYesNo" runat="server" onchange="ToggleVisible(this);"> 
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem> 
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="No" Value="0"></asp:ListItem> 
</asp:DropDownList> 

function ToggleVisible(ddl) 
{ 
    var div = document.getElementById('optional'); 
    var value = ddl.options[ddl.selectedIndex].value; 
    if(value == 1) 
    { 
    div.style.display = "none"; 
    } 
    else 
    { 
    div.style.display = "block"; 
    } 
} 

Answer 4

당신은 다음

function pageLoad() { 
    $('#dropYesNo').change(function() 
    { 
     if($(this).attr('value')=='0') 
     $('optional').show(); 
     else 
     $('optional').hide(); 
    }); 
} 

Answer 5

은 코드를 더 단순화 될 수 없습니다 jQuery를 사용하는 경우?

---

마크 업

<asp:DropDownList ID="dropYesNo" runat="server" onchange="SetTextArea(this.value)"> 
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem> 
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="No" Value="0"></asp:ListItem> 
</asp:DropDownList> 

<div id="optional" style='display:none'> 
     <p>Please Enter Your Reason</p></br> 
     <asp:TextBox ID="_refuse" runat="server" TextMode="MultiLine" ></asp:TextBox> 
     </br> 
</div> 

자바 스크립트

function SetTextArea(selectedValue){ 
    document.getElementById("optional").style.display = (selectedValue == "1")? "block" : "none"; 
}