Всем здравствуйте!
С уважением прошу помочь мне! Сегодня целый день вожусь, но ничего не смог придумать...
У меня такая проблема:
Я хочу сделать так, чтобы при выборе определённого пункта, внизу открывался доп. DropDown... Я делаю сайт на тему "Помощь по высоким технологиям" и вот делаю форму помощи... Сейчас я Вам предоставлю материалы, которые я уже сотворил:
index.html
<head>
<meta charset="utf-8">
<title>Главная</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$.viewInput = {
'0' : $([]),
//THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
'comp' : $('#comp'),
'phone' : $('#phone'),
};
$('#apparat').change(function() {
// HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
$.each($.viewInput, function() { this.hide(); });
// SHOWS THE INPUT FIELD ITEM IF SELECTED
$.viewInput[$(this).val()].show();
});
});
</script>
<style>
/* SET THE HIDDEN INPUT FIELD IN A DIV */
#comp {
display: none;
}
#phone {
display: none;
}
#note {
display: none;
}
/* FORM */
fieldset {
width: 290px;
margin: 0;
padding: 20px;
background: #f4f4f4;
border: 1px solid #ddd;
}
label {
display: block;
font: bold 1.0em arial,verdana,tahoma,sans-serif;
color: #444;
margin: 0 20px 10px 0;
padding: 0;
clear: left;
}
.textfield, .dropdown {
width: 200px;
font: normal 1.0em arial,verdana,tahoma,sans-serif;
color: #666;
margin: 0 0 20px 0;
padding: 5px 6px;
background: #fff;
border: 1px solid #ddd;
}
.dropdown {
width: 215px;
}
input:focus, select:focus {
border: 1px solid #ccc;
}
.btn, .btn:focus {
display: block;
font: bold 1.0em arial,verdana,tahoma,sans-serif;
color: #333;
text-decoration: none;
margin: 0;
padding: 3px 5px;
}
</style>
</head>
<body>
<form id="order" method="post" action="send.php">
<fieldset>
<label>Введите Ваше имя:</label>
<input type="text" name="name" class="textfield" />
<label>Введите Ваш адрес электронной почты:</label>
<input type="text" name="email" class="textfield" />
<label>Выберите тип сломанного аппарата:</label>
<select class="dropdown" name="apparat" id="apparat">
<option>Выберите...</option>
<option value="comp">Компьютер</option>
<option value="phone">Телефон</option>
</select>
<!-- BEGIN HIDDEN INPUT -->
<div id="comp">
<label>Выберите тип Вашего компьютера:</label>
<select name="compv" class="dropdown" id="compv">
<option value="notebook">Переносной ПК (ноутбук, нетбук)</option>
<option value="stat">Стационарный ПК</option>
</select>
<div id="note">
<textarea name="note" cols="55" rows="5"></textarea>
</div>
</div>
<!-- BEGIN HIDDEN INPUT -->
<div id="phone">
<label>Выберите производителя Вашего телефона:</label>
<select name="phonev" class="dropdown" id="phonev">
<option value="apple">Apple</option>
<option value="htc">HTC</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="lg">LG</option>
</select>
</div>
<!-- END HIDDEN INPUT -->
<input type="submit" name="Submit" value="Submit" class="btn" onclick="this.blur();" />
</fieldset>
</form>
</body>
А ну и всё... не думаю, что для решения вопроса нужен jQuery.js ...
Дак вот в чём проблема... я смог сделать, чтобы при нажатии на пункт "Компьютер" и чтобы при нажатии на пункт "Телефоны" выпадал доп. список, но увы не смог сделать так, чтобы при нажатии на все остальные подпункты выпадали, например, textarea...
Ребят можете подсказать как сделать, чтобы это всё дело заработало?? Хотя бы намёк... Я так понимаю, что в <script>...</script> они друг другу мешают...
Пожалуйста!!! Помогите
