Forum Debian Users Gang

debbie · 2013-06-26 15:48:00

Witam,
Wiem że problem jest dość banalny. Kiedyś go zrobiłem ale w związku z dużą przerwą z html'em
nie pamiętam ułożyć kod dla <select> <option>tak</option><option>nie</option>
aby po wybraniu np TAK poniżej wyświetliła się jedna dana tabela a po wybraniu NIE inna tabela. ( czy tam tekst czy cokolwiek )
Był bym wdzięczny za pomoc.

HAL9000 · 2013-06-26 18:52:10

Kod:

<!doctype html>
<html>
<head>
    <title></title>
<style type="text/css">
/*
poczatkowo nic nie wyswietlamy
*/
#no, #yes {
    display: none;
}
</style>
</head>
<body>
<form id="mForm">
<select id="mSelect">
    <option value='0'></option>
    <option value='1'>tak</option>
    <option value='2'>nie</option>
</select>
</form>
<div id="no">
<table>
<tr><td>nie</td><td>nie</td></tr>
<tr><td>nie</td><td>nie</td></tr>
</table>
</div>
<div id="yes">
<table>
<tr><td>tak</td><td>tak</td></tr>
<tr><td>tak</td><td>tak</td></tr>
</table>
</div>

<script type="text/javascript">
var mS = document.getElementById('mSelect');
var mNo = document.getElementById('no');
var mYes = document.getElementById('yes');
mS.onchange=function() {
    if(mS.value==='1') {
        mYes.style.display='block';
        mNo.style.display='none';
    }
    else if(mS.value==='2') {
        mYes.style.display='none';
        mNo.style.display='block';
    }
    else {
        mYes.style.display='none';
        mNo.style.display='none';
    }
}
</script>
</body>
</html>

przy użyciu jQuery powinno być jeszcze łatwiej oczywiście to jest najprostszy przykład bardziej zaawansowane rozwiazania używają danych z bazy i ajax'a ale idea jest chyba zrozumiała.

edit:
Człowiek czasami szybciej pisze niż myśli.
W inny sposób może łatwiejszy:

Kod:

<!doctype html>
<html>
<head>
    <title></title>
</style>
</head>
<body>
<form id="mForm">
<select id="mSelect">
    <option value='0'></option>
    <option value='1'>tak</option>
    <option value='2'>nie</option>
</select>
</form>
<div id="yesno">
</div>

<script type="text/javascript">
var mS = document.getElementById('mSelect');
var mYesNo = document.getElementById('yesno');
mS.onchange=function() {
    if(mS.value==='1') {
        mYesNo.innerHTML='<table><tr><td>tak</td></tr></table>';
    }
    else if(mS.value==='2') {
        mYesNo.innerHTML='<table><tr><td>nie</td></tr></table>';
    }
    else {
        mYesNo.innerHTML='';    
    }
}
</script>
</body>
</html>

Ostatnio edytowany przez HAL9000 (2013-06-26 19:05:12)

Forum Debian Users Gang

Ogłoszenie

#1 2013-06-26 15:48:00

debbie - Użytkownik

Wyświetlanie tabeli po wybraniu opcji z listy wyboru

#2 2013-06-26 18:52:10

HAL9000 - Użytkownik

Re: Wyświetlanie tabeli po wybraniu opcji z listy wyboru

Kod:

Kod:

Stopka forum