Как скрыть тег select?

Я имею эту простую форму:Как скрыть тег select?

<form method="post" action="index.php" > 
<table> 

<tr> 
<td> 
Sex: 
</td> 
<td> 
    <select name="sex" > 
    <option value="e">Select </option> 
    <option value="girl">Girl </option> 
    <option value="boy">Boy </option> 
    </select> 
</td> 
</tr> 

<tr> 
<td> 
Accessories: 
</td> 
<td> 
    <select name="earrings" > 
    <option value="e">Select </option> 
    <option value="gold">gold </option> 
    <option value="silver">silver </option> 
    </select> 
</td> 
</tr> 


</table> 

<br> 
<input type="submit" size="10" value="Go" name="go"> 
</form>

, и я хочу, чтобы, когда я нажимаю на «мальчик» в первом выбрать то этот блок должен пропадает:

<tr> 
<td> 
Accessories: 
</td> 
<td> 
    <select name="earrings" > 
    <option value="e">Select </option> 
    <option value="gold">gold </option> 
    <option value="silver">silver </option> 
    </select> 
</td> 
</tr>

Я могу сделать это с помощью CSS ? Если нет, я могу сделать это с помощью javascript?

источник

2010-12-12 xRobot

CSS, no; JavaScript, да. Нужен ли вам ванильный JavaScript или вы можете использовать библиотеку (например, jQuery, MooTools, Prototype, Scriptaculous, Glow ...)? –

Вы не можете сделать это в CSS, но вы можете в JavaScript

function hide(){ 
var earrings = document.getElementById('earringstd'); 
earrings.style.visibility = 'hidden'; 
} 

function show(){ 
var earrings = document.getElementById('earringstd'); 
earrings.style.visibility = 'visible'; 
}

Просто убедитесь, что ваш td имеет id=earringstd

Затем создайте функцию:

function genderSelectHandler(select){ 
if(select.value == 'girl'){ 
show(); 
}else if(select.value == 'boy'){ 
hide(); 
}}

Теперь все вы должны изменить свой тэп для пола:

<select name="sex" onchange="genderSelectHandler(this)">

источник

2010-12-12 18:21:55

неуклюжий, 'gender.form.earring.style.visibility = 'hidden'' делает работу –

Я пробовал это, но не работает: http://gooworld.altervista.org/ – xRobot

Возможно, есть синтаксическая ошибка или некоторые в моем коде, я набрал его с верхней части головы –

Скрытое свойство скрывает выделение, но тег по-прежнему отображается, и занимает место на странице.

Если вы хотите, чтобы скрыть отборное и не хотите, чтобы появиться на всех, но все еще быть в состоянии взаимодействовать с DOM, вот некоторые примеры кода:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 

<script type="text/javascript"> 

     function hide(){ 
      var elem = document.getElementById('sel1'); 
      elem.style.display = 'none'; 
     } 

     function show(){ 
      var elem = document.getElementById('sel1'); 
      elem.style.display = 'inline'; 
     } 

</script> 

</head> 
<body> 
    <form id="form1" runat="server"> 

     <select id='sel1' style='display:inline;'/> 

     <input type="button" onclick="show();" value="Show"></input><br> 
     <input type="button" onclick="hide();" value="Hide"></input><br> 

    </form> 
</body> 
</html>

источник

2014-02-18 15:10:37

Я знаю, что это старый, но я изменил код Горана, как указано ниже, и подумал, что я поделюсь. Это разрушает код, чтобы он не сохранял его на странице, тогда как указанный выше код продолжает удерживать его форму, но становится невидимым.

function genderSelectHandler(select){ 
if(select.value == 'girl'){ 
$("#earringstd").show() 
}else{ 
$("#earringstd").hide(); 
}} 

<select name="sex" onchange="genderSelectHandler(this)">

источник

2014-11-14 18:25:34 Crystal

Как скрыть тег select?

ответ

Смежные вопросы