当用户在组合框中选择一个值时激活文本框

当用户只从下面的组合框中选择Male时，我想在下面显示一个文本框。这应该只发生在用户选择值Male时。当用户在组合框中选择一个值时激活文本框

<td align="left"> 
    <select id="gender" name="gender" onchange='genderfind(this.value);'> 
     <option value="female">female</option> 
     <option value="male">Male</option> 
    </select> 
</td>

当用户选择“男性”从上面的组合框，下面的文本框是内部的<tr>应显示。在我试过的代码中不起作用。帮助

<tr> 
    <td align="left" name="gender" id="gender" style='display:none;'>Text box</td> 
    <td align="left" name="gender" id="gender" style='display:none;'> 
     <input id="gender_id" type="text" name="gender" style='display:none;'> 
    </td> 
    <td align="left" id="gender" name="gender"><span id="validate"></span>&nbsp;</td> 
</tr>

来源

2013-09-26 sharon Hwk

您的html无效：'id'属性应该是唯一的。你已经给所有的控件提供了相同的'id'（和'name'，它对于表单元素是有效的，但可能并不是真正想做的事情，因为给name赋值是没有意义的td元素）。在我看来，如果tr元素是“display：none”，而不是将单个项目隐藏在行中，则会更有意义。 – nnnnnn

我按照您的建议进行了代码更改，但仍然没有更改 –

试试这个

<!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=utf-8" /> 
<title>Untitled Document</title> 
<style> 
body #container .item .bg_img{background:url('search-icon-2x.png') no-repeat; height:50px;} 
</style> 
<script> 
function genderfind(val) { 
      //var element = document.getElementById('gender').value; 
      //alert(element); 
      if (val == 'male') { 
       document.getElementById('genderbox').style.display = 'block'; 
      } else { 
       document.getElementById('genderbox').style.display = 'none'; 
      } 

     } 
</script> 
</head> 
<body> 
<div id="container"> 
    <div class="item"> 
     <div class="bg_img"></div> 
     <h1>morning</h1> 
     <h2>today</h2> 
     <p>lorem ipsum.</p> 
    </div> 
</div> 
<table> 
    <tr> 
     <td align="left"> 
      <select id="gender" name="gender" onchange='genderfind(this.value);'> 
      <option value="female">female</option> 
      <option value="male">Male</option> 
      </select> 
     </td> 
     <td id="genderbox" style="display:none;"> 
      <input type="text" name="name" /> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

问候

来源

2013-09-26 13:07:31

我建议你使用jQuery。

你可以做任何事情一样，：

$('#gender').on('change', function(){ 
    var g = $(this).val(); 
    if(g == 'male') { 
    $('#gender_id').show(); 
    } 
    else 
    { 
    $('#gender_id').hide(); 
    } 
});

来源

2013-09-26 13:05:34 Flea777

我是否必须对我的HTML进行更改。或者它是一样的吗？ –

只需在整个html页面中创建唯一id。例如。在所有TD中删除ID =“性别”。 – Flea777

使用getElementsByName代替。

function genderfind(val) { 
    var element = document.getElementsByName('gender'); 
    for(int i=0;i<element.lenght;i++) 
    {   
     if (val == 'male') { 
      element[i].style.display = 'block'; 
     } else { 
        element[i].style.display = 'none'; 
     } 
    } 
}

来源

2013-09-26 13:12:32

没有'getElementByName（）'方法。它是'getElementsByName（）'（注意“s”）。 – nnnnnn

It is getElementsByName .. –

现在我不确定如果我误读了它，或者如果您在编辑历史记录启动之前的前五分钟内编辑它，但是无论如何，您的代码仍然无法运行，因为'.getElementsByName（） '返回元素的列表（HTMLCollection），而不是单个元素，所以当你说'element.style ...' – nnnnnn

当用户在组合框中选择一个值时激活文本框

回答

相关问题