当选择一个选项时显示一个文本框

问题描述：

我用一个单选按钮来显示下拉列表和三个选项。当用户选择空白选项时，我需要显示一个文本框。如果有人有一个建议可以引导我走向正确的方向，我会很感激。当选择一个选项时显示一个文本框

<!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>

答

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

我建议JQuery的，因为它会为你节省很多的跨浏览器的兼容性问题！

我会使用肘（）代替。这样你就不需要if语句。 – 2012-07-07 22:39:19

你需要如果检查是否选择了“” – Samson 2012-07-07 22:40:18

如果文本框以隐藏的方式启动，并且可选项以未选中的方式启动 – 2012-07-07 22:41:40

答

你在这个项目中使用jQuery。使用jQuery库来执行DOM操作是非常容易的。我将使用jQuery toggle（）方法（更多信息，请参阅http://api.jquery.com/css）。你可以在空白选项做这样的事情上的click事件：

$('.hide').toggle();

答

的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-07 23:24:53

well..why？您是否尝试提醒以查看该值是否被提取正确？您的div是否具有id =“box”？错误是什么萤火虫/镀铬控制台 – Samson 2012-07-08 08:30:31

当选择一个选项时显示一个文本框

相关推荐