0 / 0 / 0
Регистрация: 19.06.2013
Сообщений: 11
1

Вывод данных при выборе значения из выпадающего списка без перезагрузки

18.03.2014, 16:20. Показов 11576. Ответов 12
Метки нет (Все метки)

Добрый день. Подскажите, пожалуйста. К примеру, имеем на форме выпадающий список, содержащий числа, как сделать, чтоб при выборе любого числа (например 2), ниже отрисовывались, допустим, строки ввода по выбранному числу (те же 2 строчки), но делалось это сразу, без отправки данных. Возможно ли это средствами html? Если не трудно будет, можете привести элементарный пример, уже по нему я разберусь с принципом. Заранее спасибо
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.03.2014, 16:20
Ответы с готовыми решениями:

Вывод текста при выборе выпадающего списка
гуглил но не нашел. нужно скрипт чтобы при выборе значения формы показывался определены текст,...

Вывод таблицы при выборе из выпадающего списка
Есть выпадающий список $sql = "SELECT * FROM Fakultety"; $result_select = mysql_query($sql);...

При выборе значения из выпадающего списка заполнить строку
Есть выпадающий список в столбце А, при выборе значения из выпадающего списка, нужно что бы в этой...

Автозаполнение ячеек при выборе значения из выпадающего списка
Здравствуйте! Подскажите пожалуйста такую штуку: --есть БД, цель которой-учет расчетов с...

12
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
18.03.2014, 17:21 2
Лучший ответ Сообщение было отмечено Taatshi как решение

Решение

Socuraidat, если я правильно поняла, что вы имеете в виду, то для этого нужен js.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    function showBlock(val){
        document.getElementById('id1').style.display='none';
        document.getElementById('id2').style.display='none';
        document.getElementById('id3').style.display='none'; 
        document.getElementById('id'+val).style.display='block';        
    }
</script>
<style>
    #id1,#id2,#id3{display:none}   
</style>
<select name="items" onchange="showBlock(this.value)">
    <option value="0">--</div>
    <option value="1">1
    <option value="2">2
    <option value="3">3
</select>
<div id="id1">блок1</div>
<div id="id2">блок2</div>
<div id="id3">блок3</div>
2
0 / 0 / 0
Регистрация: 19.06.2013
Сообщений: 11
18.03.2014, 17:28  [ТС] 3
Ukkas, к сожалению, с js я еще не имел дела, но ваш код довольно понятен и в полной мере разрешил вопрос, дальше лишь буду подгонять под свои нужды. Большое спасибо
0
9 / 9 / 2
Регистрация: 14.05.2014
Сообщений: 87
19.05.2014, 08:26 4
Цитата Сообщение от Ukkas Посмотреть сообщение
document.getElementById('id1').style.display='none'; document.getElementById('id2').style.display='none'; document.getElementById('id3').style.display='none';
вместо этого может быть проще сразу дать стиль дисплей-нон в css? а если айдишек будет больше или заранее неизвестно их количество? а так помещаем нужные ячейки в общий блок и этому блок > div даем дисплей-нон!!
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
19.05.2014, 09:44 5
khpvolga, а у меня же написано
HTML5
1
2
3
<style>
    #id1,#id2,#id3{display:none}   
</style>
а еще раз они обнуляются, если первый раз выбрали, например, 2, а потом 3.
0
9 / 9 / 2
Регистрация: 14.05.2014
Сообщений: 87
19.05.2014, 09:57 6
ну? я ж грю - а если айдишек МНОГО будет, ВСЕ перечислять?
а если заранее неизвестно, сколько будет айдишек, то тогда как?))))
я имел ввиду, что вместо повторного обнуления как у вас делать обнуление через присвоение класса, класс присваивать общий блок > div

типа как в джиквери
Javascript
1
$(.all_bloks div).addClass(.hide)
HTML5
1
2
3
4
5
<div class="all_bloks">
    <div id="id1">блок1</div>
    <div id="id2">блок2</div>
    <div id="id3">блок3</div>
</div>
единственно, надо с id подумать, чтобы внутри блока с классом не было блоков с id

Добавлено через 6 минут
вот с айди
Javascript
1
$(#all_bloks div).addClass(.hide)
HTML5
1
2
3
4
5
<div id="all_bloks">
    <div id="id1">блок1</div>
    <div id="id2">блок2</div>
    <div id="id3">блок3</div>
</div>
ну и подумать как решить преимущество класса и id, класс будет второстепенным после id, тут надо кумекать
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
19.05.2014, 10:01 7
khpvolga, ну или просто циклом, которым будут выводится все эти айдишники в список, пробежаться по ним всем и скрыть.
1
9 / 9 / 2
Регистрация: 14.05.2014
Сообщений: 87
19.05.2014, 12:00 8
цикл наше все!)))
0
1 / 1 / 0
Регистрация: 09.12.2018
Сообщений: 3
09.12.2018, 22:20 9
Воспользовался данным решением, подскажите, пожалуйста, как сделать, чтобы изначально было выбрано и отображалось первое значение.
0
9 / 9 / 2
Регистрация: 14.05.2014
Сообщений: 87
10.12.2018, 11:51 10
HTML5
1
<option value="0" selected="selected">--</option>
или скриптом

Javascript
1
2
3
4
5
6
7
function SelectDefault()
  {
 
    document.getElementById("IdSelect").options[0].selected=true;
 
  }
SelectDefault();
1
1 / 1 / 0
Регистрация: 09.12.2018
Сообщений: 3
10.12.2018, 13:42 11
Спасибо, но желаемый результат не достигнут. Пытался, менял код по-разному. Может вопрос не четко сформулировал.
Хотелось бы при открытии страницы видеть выбранный первый пункт и под ним соответствующее содержимое:
I 1 I <
блок1
0
9 / 9 / 2
Регистрация: 14.05.2014
Сообщений: 87
10.12.2018, 18:37 12
http://shop24club.ru/api/easy.php




HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="content">
<div class="inner">
<h1>Жмакай</h1>
<form>
    <label for="customID">Выберите</label>
    <select id="customID">
      <option>---</option>
      <option>001</option>
      <option>002</option>
      <option>003</option>
      <option>004</option>
      <option>005</option>
      <option>006</option>
    </select>
</form>
</div>
<h2>Тут  будут блоки, Уася:</h2>
<div class="all_blocs">
    <div>блок1</div>
    <div>блок2</div>
    <div>блок3</div>
    <div>блок4</div>
    <div>блок5</div>
    <div>блок6</div>
</div>
</div>
CSS
1
2
3
4
5
6
.content{margin:10% auto;width:320px;text-align:center;font-family: verdana;font-size:16px;}
.inner{padding: 10px 20px;border: 2px dashed #ccc;margin-bottom: 40px;}
h1{font-size: 22px;}
h2{font-size:18px;}
.all_blocs{padding:10px 20px;background:#eee;}
.all_blocs > div{display:none}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var select = document.querySelector('#customID'),
all_blocs = document.querySelector('.all_blocs'),
blocs = all_blocs.getElementsByTagName('div');
 
function init() {
    select.options[1].selected=true;
    blocs[0].style.display = 'block';
}
init();
 
select.addEventListener('change', function() {
    var ind = select.selectedIndex;
    for (var i=1;i<=blocs.length;i++){
        var ii = i-1;
        if (i == ind) {
            blocs[ii].style.display = 'block';
        } else {
            blocs[ii].style.display = 'none';
        }
    }
})
Добавлено через 6 минут
на джиквери вышло бы короче в три раза, но фиг там, только хардкор!!!
1
1 / 1 / 0
Регистрация: 09.12.2018
Сообщений: 3
10.12.2018, 20:34 13
khpvolga, премного благодарен! То, что нужно
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.12.2018, 20:34

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Показать GroupBox при выборе определенного значения из выпадающего списка
Подскажите, при выборе с выпадающего списка определённого значения,чтобы GroupBox стал visible,...

Индекс за пределами диапазона при выборе значения выпадающего списка
Когда выбираю одно и тоже значение в комбобоксе выскакивает такая ошибка: ...

При выборе значения из выпадающего списка заполнить соседние ячейки из другого листа
Здравствуйте, помогите пож сделать так, чтобы при выборе водителя из выпадающего списка на листе...

При выборе значения из связанного выпадающего списка заполнить соседние ячейки из другого листа
Добрый день! Пытаюсь сделать таблицу для расчета стоимости мебели со связанными выпадающими...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.