0

ユーザーが次のコンボボックスから男性のみを選択した場合、下にテキストフィールドを表示したいと思います。これは、ユーザーが男性の値を選択した場合にのみ発生します。

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

3 に答える 3

0

jQueryを使用することをお勧めします。

あなたはそのようなことをすることができます:

$('#gender').on('change', function(){
   var g = $(this).val();
   if(g == 'male') {
     $('#gender_id').show();
   }
   else 
   {
     $('#gender_id').hide();
   }
});
于 2013-09-26T13:05:34.340 に答える
0

これを試して

<!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-26T13:07:31.163 に答える