Активировать текстовое поле, когда пользователь выбирает значение в выпадающем списке

Question

Активировать текстовое поле, когда пользователь выбирает значение в выпадающем списке

0

Когда пользователь ТОЛЬКО выбирает Male из следующего combobox, я хочу отобразить текстовое поле ниже. Это должно произойти только тогда, когда пользователь выбирает значение 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>

Когда пользователь выбирает "male" из приведенной выше комбинации, должно отображаться следующее текстовое поле, которое находится внутри <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>

sharon Hwk 26 сен. 2013, в 15:06

Источник

Теги:

javascript

jquery

3 ответа

0

Вместо этого используйте 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';
        }
     }
}

Irfan TahirKheli 26 сен. 2013, в 11:52

0

Нет метода getElementByName() . Это getElementsByName() (обратите внимание на «s»).
nnnnnn 26 сен. 2013, в 13:15
0

Это getElementsByName ..
Irfan TahirKheli 26 сен. 2013, в 13:16
0

Теперь я не уверен, что я неправильно его прочитал или вы редактировали его в течение первых пяти минут, прежде чем история редактирования начала работать, но в любом случае ваш код все равно не будет работать, потому что .getElementsByName() возвращает список (HTMLCollection) из элементы, а не один элемент, поэтому вы получите сообщение об ошибке, когда скажете element.style...
nnnnnn 26 сен. 2013, в 13:28
0

человек. надо хотя бы иметь здравый смысл обновлять ошибки. Ответ здесь, чтобы направить человека в правильном направлении.
Irfan TahirKheli 26 сен. 2013, в 13:42

Показать ещё 2 комментария

0

Я предлагаю вам использовать jQuery.

Вы можете сделать следующее:

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

Flea777 26 сен. 2013, в 11:32

0

Должен ли я внести изменения в мой HTML. или это тоже самое?
sharon Hwk 26 сен. 2013, в 13:09
0

Просто сделайте идентификаторы уникальными для всей HTML-страницы. Например, удалить идентификатор = "пол" во всех TD.
Flea777 26 сен. 2013, в 13:12

Ещё вопросы

Нет метода getElementByName() . Это getElementsByName() (обратите внимание на «s»).
Теперь я не уверен, что я неправильно его прочитал или вы редактировали его в течение первых пяти минут, прежде чем история редактирования начала работать, но в любом случае ваш код все равно не будет работать, потому что .getElementsByName() возвращает список (HTMLCollection) из элементы, а не один элемент, поэтому вы получите сообщение об ошибке, когда скажете element.style...
человек. надо хотя бы иметь здравый смысл обновлять ошибки. Ответ здесь, чтобы направить человека в правильном направлении.
Должен ли я внести изменения в мой HTML. или это тоже самое?
Просто сделайте идентификаторы уникальными для всей HTML-страницы. Например, удалить идентификатор = "пол" во всех TD.

Sunil Verma · Accepted Answer · 2013-09-26T11-12-00.000Z

попробуй это

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

С уважением