Porównaj ceny domen i usług IT, sprzedawców z całego świata

Jak ukryć zaznaczenie?


Mam taki prosty formularz:
<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>
<input type="submit" size="10" value="Go" name="go">
</form>

i chcę, aby po kliknięciu „chłopca” w pierwszym zaznaczeniu ten blok zniknął:
<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>

Czy mogę to zrobić za pomocą CSS?
Jeśli nie, czy mogę to zrobić za pomocą javascript?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Nie możesz tego zrobić w CSS, ale możesz w JavaScript
function hide(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'hidden';
}function show(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'visible';
}

Po prostu upewnij się, że
td
ma
id = earringstd
Następnie utwórz funkcję:
function genderSelectHandler(select){
if(select.value == 'girl'){
show();
}else if(select.value == 'boy'){
hide();
}}

Teraz wszystko, co musisz zrobić, to zmienić płeć, wybrać tag, aby:
<select name="sex" onchange="genderSelectHandler(this)">
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Ukryta właściwość ukrywa zaznaczenie, ale tag jest nadal widoczny i zajmuje miejsce na stronie.
Jeśli chcesz ukryć zaznaczenie i nie chcesz, aby w ogóle się pojawiało, ale nadal mieć możliwość interakcji z DOM, oto przykładowy kod:
<html xmlns="[url=http://www.w3.org/1999/xhtml">]http://www.w3.org/1999/xhtml">[/url]
<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>
<input type="button" onclick="hide();" value="Hide"></input> </form>
</body>
</html>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Wiem, że to jest stare, ale zmodyfikowałem kod Gorana jak poniżej i pomyślałem, że go udostępnię. Powoduje to zwinięcie kodu, aby nie zachował swojego miejsca na stronie, podczas gdy powyższy kod nadal zachowuje swój kształt, ale staje się niewidoczny.
function genderSelectHandler(select){
if(select.value == 'girl'){
$("#earringstd").show()
}else{
$("#earringstd").hide();
}}<select name="sex" onchange="genderSelectHandler(this)">

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się