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

Activate text box when the user selects a value in a combobox

本文关键字：激活 文本 选择 用户 组合      更新时间：2023-09-26

当用户仅从以下组合框中选择男性时，我想在下面显示一个文本字段。仅当用户选择值 male 时，才应发生这种情况。

function genderfind(val) {
    var element = document.getElementById('gender');
    if (val == 'male' ) {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}

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

试试这个 

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

问候

我建议你使用jQuery。

你可以做这样的事情：

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

改用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';
        }
     }
}
相关文章：