Список select, помогите сделать.
Нужно, что бы когда в списке select пользователь выбирал option value="1"
То на странице к надписи "Дракон" добавлялось "синий". Если пользователь выбирал option value="2" то "красный". Помогите реализовать. Вроде бы просто, но что то не получилось.:blink: :help: |
Monster123,
где попытки? |
function vahtaChange(combo){
var val=document.getElementById('categories').value if(val == '1'){ document.write('синий'); }else{ document.write(); } } Думал как то так, но не выходит. |
Monster123,
а html? Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<select id="categories" name="id_razd" onchange="vahtaChange(this)" >
<option value="0">Все категории</option>
<?
$res = mysql_query("SELECT id,name FROM ".PREF."razd");
while($row = mysql_fetch_assoc($res)){
?>
<option value="<?=$row['id']?>"><?=$row['name']?></option>
<?
}
?>
</select>
<div id="drakon">
Дракон
[JS]
function vahtaChange(combo){
var val=document.getElementById('categories').value
if(val == '1'){
document.write('синий');
}else{
document.write();
}
}
[/JS]
<br>
<label>
от:
<input name="min" class="p_search" type="text" size="2">
до:
<input name="max" class="p_search" type="text" size="2">
</label>
</div>
|
Monster123,
document.write можно использовать безболезненно, только при загрузке!!! лучше забыть о document.write, на время обучения.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<p class="dragon">Дракон</p>
<select class="color">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select><script>
window.addEventListener('DOMContentLoaded', function() {
var p = document.querySelector('.dragon'),
select = document.querySelector('.color'),
text = p.innerHTML;
select.addEventListener('change', function() {
p.innerHTML = text + ['',' синий',' красный'][this.value]
});
});
</script>
</body>
</html>
|
Здравствуйте! Извиняюсь что не по теме пишу, я тут совсем новичок так что не судите строго, не знаю куда писать точно! У меня такой вопрос кто может помогите пожалуйста! Вот пример, есть форма регистрации в неё клиент вводит свои данные, вот как сделать так что когда он уже зашел в кабинет после регистрации данные которые он вводил при регистрации уже были автоматически заполнены в его кабинете к примеру его ИМЯ, ФАМИЛИЯ, ТЕЛЕФОН, СТРАНА, СКАЙП И Т.д чтоб мне и ему не пришлось самолично это вводить, как такое реализовать?
|
Дима1892,
если данные при регистрации ушли на сервер, то это дело сервера выдать кабинет заполненный нужными данными. |
Спасибо. Но есть ещё вопрос
|
<select id="categories" name="id_razd" onchange="vahtaChange(this)" >
<option value="0">Все категории</option>
<?
$res = mysql_query("SELECT id,name FROM ".PREF."razd");
while($row = mysql_fetch_assoc($res)){
?>
<option value="<?=$row['id']?>"><?=$row['name']?></option>
<?
}
?>
</select>
<div id="vidobject" style="display:none;">
<select name="id_razd2" >
<option value="0">Вид объекта</option>
<?
$res = mysql_query("SELECT id,name FROM ".PREF."razd2");
while($row = mysql_fetch_assoc($res)){
?>
<option value="<?=$row['id']?>"><?=$row['name']?></option>
<?
}
?>
</select>
Как сделать что бы если в "id_razd" "option=1" то в "id_razd2" выпадают "option" до 3. А если в "id_razd" "option=2" то в "id_razd2" выпадают "option" от 4. ??? |
"Выпадают", это как?
|
:help:
|
Ну выпадающий список. select
|
выпадают "option" до 3
и выпадают "option" от 4 Это как понять? Если в первом выбрали N, а во втором при этом должна быть выбрана опция M, это понятно. А вот до и от, это нечто... |
Option со значением 1,2,3 это до 3.
|
Ну и что должно быть?
|
Если в id razd выбрана option со значением value="1", то в razd2 откроются только option value="1",value="2",value="3".А если в id razd выбрана option со значением value="2", то в razd2 откроются только option value="4",value="5",value="6".
|
Зависимые селекторы
Monster123,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<p class="dragon">Дракон</p>
<select class="color" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="view" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<script>
window.addEventListener('DOMContentLoaded', function() {
var p = document.querySelector('.dragon'),
select = document.querySelector('.color'),
sel = document.querySelector('.view'),
opt = sel.querySelectorAll('option');
arr = [[],["1","2","3"],["4","5","6"]],
text = p.innerHTML,
foo = function() {
var val = +this.value, ar = arr[val];
p.innerHTML = text + ['',' синий',' красный'][val];
sel.options.length = 0;
[].forEach.call( opt, function(el) {
if( ar.indexOf(el.value) !== -1) sel.appendChild(el)
});
sel.classList[sel.options.length ? 'remove' : 'add']("hide")
};
select.addEventListener('change', foo);
foo.bind(select)()
});
</script>
</body>
</html>
|
Только без цвета и дракона.
|
Цитата:
|
Всё разобрался. Спасибо.
|
| Часовой пояс GMT +3, время: 16:15. |