【備忘録】javascriptでdropdownlist内の一部選択肢の表示/非表示を切り替える方法

やりたいこと

ASP.NETでWebアプリを開発しているときに、javascriptでdropdownlist内の選択肢を状況に応じて一部選択肢の表示/非表示の切り替えが出来る様にしたかった。

解決方法

表示/非表示にしたい選択肢のdisplayプロパティをいじることにより解決した。

●javascript

//選択肢の「不明」の表示/非表示を切り替える。
function Changeoptions() {
 var ddl1 = document.getElementById("<%=ddl_1.ClientID %>")
 if(ddl1.options[3].style["display"]=="none"){
   ddl1.options[3].style["display"] = "block";
 }else{
   ddl1.options[3].style["display"] = "none";
 }
}

●aspx

<asp:Button runat="server" Text="選択肢変更" OnClientClick="ChangeOptions(); return false;" />
<asp:DropDownList ID="ddl_1" runat="server">
	<asp:ListItem >選択してください</asp:ListItem>
	<asp:ListItem >はい</asp:ListItem>
	<asp:ListItem >いいえ</asp:ListItem>
	<asp:ListItem style="display: none;">不明</asp:ListItem>
</asp:DropDownList>

後は、Changeoptions()をボタンのOnClientClickとかに入れればOK。

おわりに

ネットを調べてもこの方法が使われている所が見つからなかったので何か問題があるかもだけど、動いているのでヨシ！( ΦωΦ)σ