Как спрятать элемент?

@Hyliop · Регистрация: 13.02.2015

Студворк — интернет-сервис помощи студентам

Привет всем. Подскажите как можно спрятать элемент input'a, если выбрано значение в селекте "Выбрать".
В данном коде я показываю элемент инпутов, если выбран товар в селекте.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
echo "<select  name='maker' onChange='updatePrice(this)'>"; 
   echo '<option value="0">-- Выбрать --</option>';
       foreach ($arr_get as $value) {
        $ID                  = $value['ID'];
        $Price              = $value['Price'];
        $Model             = $value['Model'];   
   echo '<option data-price="'.$Price.'" value="'.$ID.'">'." $Manufacture"." "."$Model"."</option>';                                    
    }
echo "</select>";
echo "</div>";
echo "<td><input type='text' id='kol1' name='kol1' value='1'></td>";
echo "<td><input type='text' id='price_cpu' name='price_cpu' value=''></td>";

У меня сейчас такой код:

JavaScript
1
2
3
4
5
6
7
8
9
document.getElementById("price_cpu").style.display = "none";
 
function updatePrice(select){
 var selected=select.options[select.selectedIndex],
 price=selected.getAttribute("data-price");
 document.getElementById('price_cpu').value = price;
 document.getElementById("price_cpu").style.display = "inline-block";
        
 }

К этому же вопросу дополнение:
Как универсально это сделать? У меня 6-7 селектов и как уменьшить код?

@Armi · 24.05.2015, 11:49

setti класс ваших селектов

JavaScript
1
2
3
4
5
6
7
8
9
10
 function ready() {
    var inputs = document.getElementsByClassName('setti');
    for(i=0; i<inputs.length; i++){
        inputs[i].addEventListener("change", function(){
        updatePrice(this);
        });
    }
  }
 
  document.addEventListener("DOMContentLoaded", ready);

@Hyliop · 24.05.2015, 12:04 **[ТС]**

Armi, ещё ваш код не пробовал. Попробую
У меня есть такой код на скрытие, но, у меня 8 селектов. Кода будет выше крыше.
Я скрываю картинку, стоимость товара, который ещё не выбран в селекте. А как он выбирается -- показываю соответствующую цену и картинку. Но хочется ещё и ссылку на товар(это второстепенно), но не знаю как уменьшить код.....

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<tr>
<td>Процессор</td>
<td>
<?php
echo "<div class='newselect'>";
echo "<select class='chosen' id='chosenmak' style='width:540px;' name='maker' onChange='getpricecpu()'>";
echo '<option value="0">-- Выбрать --</option>';
foreach ($arr_get as $value) {
$ID   = $value['ID'];
$Price  = $value['Price'];
$Model = $value['Model'];
$photo = $value['photo'];
echo '<option data-price="'.$Price.'" data-image="'.$photo.'" value="'.$Model.'">'
."$Price"."  грн. ----"." $Manufacture"." '</option>';
}
echo "</select>";
echo "</div>";
echo "<span id='model'><img src='$photo' id='preview'/></span>";
echo "<td><input type='number' min='1' id='kol_cpu' name='kol_cpu' onChange='sumprice()'></td>";
echo "<td><input class='label' id='price_cpu' name='price_cpu' readonly /></td>";
?>
</td>
</tr>

Вот JS код http://jsfiddle.net/f2Lsxh73/1/

@Armi · 24.05.2015, 12:10

JavaScript
1
2
3
4
5
6
7
8
9
10
function updatePrice(select){
 var selected=select.options[select.selectedIndex],
 price=selected.getAttribute("data-price");
var pricecpu = document.getElementById('price_cpu');
if(selected.value!=0){
 pricecpu.value = price;
 pricecpu.style.display = "inline-block";
 } 
else{pricecpu.style.display = "none"}      
 }

Добавлено через 2 минуты
Оберните все эти поля которые надо скрывать в какой нибудь div и скрывайте его.

@Hyliop · 24.05.2015, 12:11 **[ТС]**

Armi, я пытаюсь сделать что-то похожее на http://www.positive45.ru/konstruktor или http://www.compday.ru/configurator.html

@Armi · 24.05.2015, 12:22

У вас jquery есть на сайте что вы мучаетесь с чистым JS.

@arcmag · 24.05.2015, 12:23

Ну во первых у вас там насколько я вижу 2 инпута, какой из них скрывать то? или оба скрыть надо?

Во вторых хотелось бы увидеть готовую верстку а не обрывок PHP кода это упростило бы понимание задачи...

@Armi · 24.05.2015, 12:35

Зачем вам поле количество select ом?

Добавлено через 3 минуты
Во вторых сделайте отдельное поле цена(одной единицы товара).

@Hyliop · 24.05.2015, 12:51 **[ТС]**

arcmag, 1 инпут - для ввода количества, 2-й - для вывода стоимости.
На счет верстки. Чтобы увидеть вертку полноценно, то надо файлики высылать(:

HTML5
1
2
3
4
5
6
7
8
9
10
<table class='display table table-bordered'>
<thead style='background: #F1F2F7'>
<tr>
<th style="width:200px">Тип</th>
<th>Наименование</th>
<th>Цена, грн.</th>
</tr>
</thead>            
//тут код, который выше.
<input type='hidden' name='kol_cpu' value='1'/>

Моя задача - скрыть элементы(поля кол-во покупаемого товара как 1 и стоимость товара из бд) до тех пор, пока не будет выбрано значение в селекте. При том, что стоимость товара должна соответствовать товару из селекта.
Ну как на сайте

Добавлено через 8 минут
Могу дать отблагодарить за помощь.

@Armi · 24.05.2015, 13:07

Так попробуйте должно скрыть при загрузке и показать при выборе. Подключите jquery к сайту перед этим!!! На чистом замучаетесь писать.

JavaScript
1
2
3
4
5
6
7
$(document).ready(function(){
$(".div_k_f_n, .catalog_pk select, .catalog_psum input, .catalog_pv").css("display", "none");
    $(".catalog_left select").on("change", function(){
    $(this).parents("tr").find(".div_k_f_n, .catalog_pk select, .catalog_psum input, .catalog_pv").css("display", "block");
    
    });
});

@arcmag · 24.05.2015, 13:08

Короче код бред (вы уж простите), это все равно что если бы вы попросили меня нарисовать портрет вашей жены по фотографии ее уха...

Короче чуток переделал ваш пример, в случае если в селекте назначена опция "Выбрать" соседний инпут исчезает...

PHP/HTML
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.addEventListener("load",function(){
    sel = document.getElementsByTagName("select");
    for(var i=0; i<sel.length; i++){
        sel[i].addEventListener("change",f);
        sel[i].parentNode.nextElementSibling.childNodes[1].style.display = "none";
    }
});
function f(){
    this.parentNode.nextElementSibling.childNodes[1].style.display = this.value=="Выбрать"?"none":"block";
}
</script>
</head>
<body>d
<table class='display table table-bordered'>
<thead style='background: #F1F2F7'>
    <tr>
        <th style="width:200px">Тип</th>
        <th>Наименование</th>
        <th>Цена, грн.</th>
    </tr>
</thead>
    <tr>
        <td>Бла бла</td>
        <td>бла?</td>
        <td>
            <select>
                <option>Выбрать</option>
                <option>100</option>
                <option>200</option>
                <option>300</option>
            </select>
        </td>
        <td>
            <input type='text'/>
        </td>
    </tr>
    <tr>
        <td>Бла бла</td>
        <td>бла?</td>
        <td>
            <select>
                <option>Выбрать</option>
                <option>100</option>
                <option>200</option>
                <option>300</option>
            </select>
        </td>
        <td>
            <input type='text'/>
        </td>
    </tr>
</table>
</body>
</html>

@Hyliop · 24.05.2015, 13:22 **[ТС]**

arcmag, да, код бредовый у меня. Иначе не знаю как сделать. Видимо надо человек, который за копеечку поможет

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .

@Hyliop 1 / 1 / 2 Регистрация: 13.02.2015 Сообщений: 99
	24.05.2015, 12:11 [ТС]
	Armi, я пытаюсь сделать что-то похожее на http://www.positive45.ru/konstruktor или http://www.compday.ru/configurator.html 0

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	24.05.2015, 12:22
	У вас jquery есть на сайте что вы мучаетесь с чистым JS. 0

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	24.05.2015, 12:23
	Ну во первых у вас там насколько я вижу 2 инпута, какой из них скрывать то? или оба скрыть надо? Во вторых хотелось бы увидеть готовую верстку а не обрывок PHP кода это упростило бы понимание задачи... 0

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	24.05.2015, 12:35
	Зачем вам поле количество select ом? Добавлено через 3 минуты Во вторых сделайте отдельное поле цена(одной единицы товара). 0

@Hyliop 1 / 1 / 2 Регистрация: 13.02.2015 Сообщений: 99
	24.05.2015, 13:22 [ТС]
	arcmag, да, код бредовый у меня. Иначе не знаю как сделать. Видимо надо человек, который за копеечку поможет 0