Появление DropDown...
Всем здравствуйте!
С уважением прошу помочь мне! Сегодня целый день вожусь, но ничего не смог придумать... У меня такая проблема: Я хочу сделать так, чтобы при выборе определённого пункта, внизу открывался доп. 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> они друг другу мешают... Пожалуйста!!! Помогите:help: |
Друг, если я понял тебя правильно, то может быть как то так
<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() {
$('#apparat').change(function() {
$('.drop').hide()
$('#'+this.value).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 value="none">Выберите...</option>
<option value="comp">Компьютер</option>
<option value="phone">Телефон</option>
<option value="note">Другое#1</option>
<option value="note">Другое#2</option>
<option value="note">Другое#3</option>
</select>
<!-- BEGIN HIDDEN INPUT -->
<div id="comp" class="drop">
<label>Выберите тип Вашего компьютера:</label>
<select name="compv" class="dropdown" id="compv">
<option value="notebook">Переносной ПК (ноутбук, нетбук)</option>
<option value="stat">Стационарный ПК</option>
</select>
</div>
<!-- END HIDDEN INPUT -->
<!-- BEGIN HIDDEN INPUT -->
<div id="note" class="drop">
<label>Опишите здесь чтото:</label>
<textarea name="note" class="dropdown"></textarea>
</div>
<!-- END HIDDEN INPUT -->
<!-- BEGIN HIDDEN INPUT -->
<div id="phone" class="drop">
<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>
|
Цитата:
|
А нет... При нажатии у меня вывести то получилось... Но при выводе "Опишите здесь что-то" уходит dropdown id="comp"... С этим я как-то справится не могу... Помогите, пожалуйста...
|
может тогда так
обязательно убери #note{display:none}
<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() {
$('#apparat').change(function() {
$('.drop').hide()
$('#'+this.value).show()})})
</script>
<style>
/* SET THE HIDDEN INPUT FIELD IN A DIV */
#comp {
display: none;
}
#phone {
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 value="none">Выберите...</option>
<option value="comp">Компьютер</option>
<option value="phone">Телефон</option>
</select>
<!-- BEGIN HIDDEN INPUT -->
<div id="comp" class="drop">
<label>Выберите тип Вашего компьютера:</label>
<select name="compv" class="dropdown" id="compv">
<option value="notebook">Переносной ПК (ноутбук, нетбук)</option>
<option value="stat">Стационарный ПК</option>
</select>
<div id="note">
<label>Опишите здесь чтото:</label>
<textarea name="note" class="dropdown"></textarea>
</div>
</div>
<!-- END HIDDEN INPUT -->
<!-- BEGIN HIDDEN INPUT -->
<div id="phone" class="drop">
<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>
|
Нет... Не получается... Он тогда показывает "Опишите здесь что-то" сразу при нажатии на "Компьютер"...
|
все очень просто технически просто не пойму что конкретно нужно опиши на словах сколько селектов сколько там опций и что должно появляться при выборе каждой опции, без проблем сделаю тебе код
|
:) hide - делает код спойлером(дабы топик оставался читаемым
[HTML hide run height=300][/HTML] |
Цитата:
1.1.1.При выборе "Переносной ПК" должно выйти dropdown "Производитель" (Apple, Acer, Asus, Dell, HP, LG, Lenovo, Panasonic, RoverBook, Samsung, Sony, Toshiba) > 1.1.2.При выборе любого из производителей должны выйти 2 textarea... 1textarea "Марка"(например: RS700) 2textarea "Описание проблемы"/// 1.2.1.При выборе "Настольный ПК" выпадает textarea "Описание проблемы"/// 2.При выборе "Телефон" должен выпасть dropdown "Производитель" (Apple, HTC, Nokia, Samsung, LG) 2.1.При выборе любого из производителей должны выпасть textarea: 1textarea "Марка" (например: E2134), 2textarea "Описание проблемы"/// Вот и вся форма... Но самое главное в этом это, наконец таки вывести textarea... Помогите с осуществлением JS, пожалуйста! |
Помогите ПОЖАЛУЙСТА!!!
Цитата:
1.1.1.При выборе "Переносной ПК" должно выйти dropdown "Производитель" (Apple, Acer, Asus, Dell, HP, LG, Lenovo, Panasonic, RoverBook, Samsung, Sony, Toshiba) > 1.1.2.При выборе любого из производителей должны выйти 2 textarea... 1textarea "Марка"(например: RS700) 2textarea "Описание проблемы"/// 1.2.1.При выборе "Настольный ПК" выпадает textarea "Описание проблемы"/// 2.При выборе "Телефон" должен выпасть dropdown "Производитель" (Apple, HTC, Nokia, Samsung, LG) 2.1.При выборе любого из производителей должны выпасть textarea: 1textarea "Марка" (например: E2134), 2textarea "Описание проблемы"/// Вот и вся форма... Но самое главное в этом это, наконец таки вывести textarea... Помогите с осуществлением JS, пожалуйста! |
Цитата:
Для текущего кода
<!DOCTYPE HTML>
<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="http://code.jquery.com/jquery-latest.js"></script>
<style>
/* SET THE HIDDEN INPUT FIELD IN A DIV */
.hide {
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 value="none">Выберите...</option>
<option value="comp">Компьютер</option>
<option value="phone">Телефон</option>
<option value="note">Другое#1</option>
<option value="note">Другое#2</option>
<option value="note">Другое#3</option>
</select>
<!-- BEGIN HIDDEN INPUT -->
<div class="drop hide">
<label>Выберите тип Вашего компьютера:</label>
<select name="compv" class="dropdown" id="comp">
<option value="notebook">Переносной ПК (ноутбук, нетбук)</option>
<option value="stat">Стационарный ПК</option>
</select>
</div>
<!-- END HIDDEN INPUT -->
<!-- BEGIN HIDDEN INPUT -->
<div class="drop hide">
<label>Опишите здесь что-это:</label>
<textarea name="note" id="note" class="dropdown"></textarea>
</div>
<!-- END HIDDEN INPUT -->
<!-- BEGIN HIDDEN INPUT -->
<div class="drop hide">
<label>Выберите производителя Вашего телефона:</label>
<select name="phonev" class="dropdown" id="phone">
<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>
<script>
$(document).ready(function() {
$('#apparat').change(function() {
var b =$(this).find('option:checked').val();
$('.drop.hide').hide();
$('#'+b).parents('.drop').show()
});
$('.dropdown').change(function() {//alert("A")
});
});
</script>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 01:39. |