04.01.2013, 19:22
|
|
Интересующийся
|
|
Регистрация: 13.08.2012
Сообщений: 20
|
|
|
Появление 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> они друг другу мешают...
Пожалуйста!!! Помогите 
|
|
05.01.2013, 10:58
|
|
жажду знаний
|
|
Регистрация: 17.07.2009
Сообщений: 202
|
|
Друг, если я понял тебя правильно, то может быть как то так
<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>
Последний раз редактировалось bushstas, 05.01.2013 в 11:01.
|
|
05.01.2013, 13:06
|
|
Интересующийся
|
|
Регистрация: 13.08.2012
Сообщений: 20
|
|
Сообщение от bushstas
|
Друг, если я понял тебя правильно, то может быть как то так
<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 "compv" но не получилось...
|
|
05.01.2013, 13:16
|
|
Интересующийся
|
|
Регистрация: 13.08.2012
Сообщений: 20
|
|
|
А нет... При нажатии у меня вывести то получилось... Но при выводе "Опишите здесь что-то" уходит dropdown id="comp"... С этим я как-то справится не могу... Помогите, пожалуйста...
|
|
05.01.2013, 14:40
|
|
жажду знаний
|
|
Регистрация: 17.07.2009
Сообщений: 202
|
|
может тогда так
обязательно убери #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>
__________________
не стреляйте в пианиста, он играет, как умеет
Последний раз редактировалось bushstas, 05.01.2013 в 14:45.
|
|
05.01.2013, 16:49
|
|
Интересующийся
|
|
Регистрация: 13.08.2012
Сообщений: 20
|
|
|
Нет... Не получается... Он тогда показывает "Опишите здесь что-то" сразу при нажатии на "Компьютер"...
|
|
05.01.2013, 17:28
|
|
жажду знаний
|
|
Регистрация: 17.07.2009
Сообщений: 202
|
|
|
все очень просто технически просто не пойму что конкретно нужно опиши на словах сколько селектов сколько там опций и что должно появляться при выборе каждой опции, без проблем сделаю тебе код
__________________
не стреляйте в пианиста, он играет, как умеет
|
|
05.01.2013, 17:49
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
 hide - делает код спойлером(дабы топик оставался читаемым
[HTML hide run height=300][/HTML] |
|
05.01.2013, 18:29
|
|
Интересующийся
|
|
Регистрация: 13.08.2012
Сообщений: 20
|
|
|
Сообщение от bushstas
|
|
все очень просто технически просто не пойму что конкретно нужно опиши на словах сколько селектов сколько там опций и что должно появляться при выборе каждой опции, без проблем сделаю тебе код
|
1.При выборе "Компьютер" должно выйти dropdown "Тип компьютера" (Переносной ПК (Ноутбук, Нетбук)) и (Настольный ПК) >
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, пожалуйста!
|
|
12.02.2013, 21:26
|
|
Интересующийся
|
|
Регистрация: 13.08.2012
Сообщений: 20
|
|
|
Помогите ПОЖАЛУЙСТА!!!
|
Сообщение от bushstas
|
|
все очень просто технически просто не пойму что конкретно нужно опиши на словах сколько селектов сколько там опций и что должно появляться при выборе каждой опции, без проблем сделаю тебе код
|
1.При выборе "Компьютер" должно выйти dropdown "Тип компьютера" (Переносной ПК (Ноутбук, Нетбук)) и (Настольный ПК) >
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, пожалуйста!
|
|
|
|
