0

ラジオ ボタンを使用して、3 つのオプションを含むドロップダウン リストを表示しました。ユーザーが空白のオプションを選択したときにテキスト ボックスを表示する必要があります。誰かが私を正しい方向に導く提案があれば、私は感謝します. 

 <!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=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<form name="frm1" method="POST" action="">
<p>Select type of exception:<br />
<div id="tabs">
<div id="nav">
Waiver:<input type="radio" name="tab" value="pickfrom" class="div5" />

</div>

<div id="div5" class="tab"><br />
<label>Reason for Waiver</label>
<select name="selWaiver" id="waivers" onchange="if(this.selected index==blank){this.form['box'].style.visibility='visible'}else{this.form['box'].style.visibility='hidden'};">

<option value="reason">Reason</option>
<option value="newReason">New Reason</option>
<option value="blank">Blank</option>
</select>



</div>

</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
} }
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</form>
</body>
</html>
4

3 に答える 3

0 
    <select name="selWaiver" id="waivers" onchange='if ($(this).val()=="") {
$("#box").show(); }else{
$("#box").hide();}'>

JQuery をお勧めします。ブラウザー間の互換性の問題を大幅に軽減できるからです。

于 2012-07-07T22:37:49.487 に答える
0

このプロジェクトで jQuery を使用していますか。jQuery ライブラリを使用して DOM 操作を実行する方がはるかに簡単です。これには jQuery toggle() メソッドを使用します (詳細はhttp://api.jquery.com/cssを参照)。空白のオプションのクリック イベントで次のようなことができます。

$('.hide').toggle();
于 2012-07-07T22:38:15.277 に答える
0

Javascript バージョン (未テスト) : 

 <select name="selWaiver" id="waivers" onchange='check(this);'>   
    <script>
    function check(sel)
    {
    var value=frm1.selWaiver.options[frm1.selWaiver.options.selectedIndex].value;
    //alert(value) to see if it works
    var box=document.getElementById("box");
    if (value=="")
       box.style.display="block";
    else 
       box.style.display="none";
    }
    </script>
于 2012-07-07T22:56:02.117 に答える