當用戶在組合框中選擇一個值時激活文本框

當用戶只從下面的組合框中選擇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

當用戶在組合框中選擇一個值時激活文本框

回答

相關問題