Как получить данные из селекта
Доброго времени суток всем! Делаю сайт на подобии этого(не реклама) и столкнулся с тем, что надо вывести стоимость, изображение товара, который мы выбрали в селекте. Если значение в селекте "Выбрать", то стоимость и изображение не показывается.
У меня селектов 6-8 штук(ну как на сайте практически) и код, который ниже уж очееень большой как для 1 селекта. Я скрываю изначально поля, а потом при выборе товара - показываю.. Ранее был такой код js(огромный, не правда ли?) http://jsfiddle.net/f2Lsxh73/3/ А код php сейчас такой
<table>
<thead style='background: #F1F2F7'>
<tr>
<th>Тип</th>
<th>Наименование</th>
<th>Цена, грн.</th>
</tr>
</thead>
<tr>
<td>Процессор</td>
<td>
<?php
echo "<div class='newselect'>";
echo "<select class='chosen' id='chosenmak' name='maker' onchange='updatePrice(this)'>";
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.'">'."$Model".'</option>';
}
echo "</select>";
echo "</div>";
echo "<span id='model'><img src='$photo' class='t' id='preview'/></span>";
echo "<td><input class='label' id='price_cpu' name='price_cpu' readonly/></td>";
?>
</td>
</tr>
Другие селекты также сделаны, но только немного другие значения вывожу. http://prntscr.com/791bzt вот так. JS код изменил на такое для одного селекта. Изначально всё скрыто и задача опять остается: картинка/стоимость(должны соответствовать товару) скрыты все и должны выводится тогда, когда выбран товар в селекте. Если не выбрано, то скрывать опять.
sel = document.getElementById("myTab").getElementsByClassName("t")
for(var i=0; i<sel.length; i++) sel[i].style.display = "none";
selLabel = document.getElementById("myTab").getElementsByClassName("label")
for(var i=0; i<selLabel.length; i++) selLabel[i].style.display = "none";
function updatePrice(select){
var image=select.options[select.selectedIndex].getAttribute("data-image");
var price=select.options[select.selectedIndex].getAttribute("data-price");
document.getElementById('price_cpu').innerHTML = price;
}
Подскажите/помогите: Как вывести стоимость и картинку товара, который выбран в селекте? Я говорил, что их 6-8 Если ничего не выбрано в селекте, то скрывать/не показывать стоимость и картинку Я совсем новичок и не знаю как сделать. |
Цитата:
|
ksa, я могу скинуть вам файлик, вы посмотрите.
Даже с простеньким примером не получается. :help: |
Цитата:
Цитата:
|
Цитата:
На чистом хтмле вот ссылка выше. У меня пхп и немного отличается |
И что тут нужно сделать?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table id='myTab'>
<tr>
<th>Тип</th>
<th>Наименование</th>
<th>Изображение</th>
<th>Цена, грн.</th>
</tr>
<tr>
<td>Processors</td>
<td>
<select class='t'>
<option>Выбрать</option>
<option value='Processors-1'> ЕУІІ 1</option>
<option value='Processors-2'> ЕУІЕ 2</option>
<option value='Processors-2'> ЕУІЕ 3</option>
</select>
</td>
<td><img src='http://javascript.ru/forum/image.php?u=8616&dateline=1282216923'></td>
<td>22</td>
</tr>
<tr>
<td>Graphics</td>
<td>
<select class='t'>
<option>Выбрать</option>
<option value='Graphics-1'> Graphics GeForce GTX 970 </option>
<option value='Graphics-2'> Graphics GeForce GT 720 </option>
<option value='Graphics-3'> Graphics 333 </option>
</select>
</td>
<td><img src='http://javascript.ru/forum/image.php?u=8616&dateline=1282216923'></td>
<td>33</td>
</tr>
</table>
</body>
</html>
|
Цитата:
|
Но, как я понимаю, рисунки и цены должны быть разные. Где это все брать?
|
Цитата:
|
Цитата:
|
Как вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('.t').change(function(){
var o=$(this.options[this.selectedIndex]);
var or=$(this.parentNode.parentNode);
or.find('span').text(o.data('price'));
or.find('img').attr('src',o.data('img'));
});
});
</script>
</head>
<body>
<table id='myTab'>
<tr>
<th>Тип</th>
<th>Наименование</th>
<th>Изображение</th>
<th>Цена, грн.</th>
</tr>
<tr>
<td>Processors</td>
<td>
<select class='t'>
<option value='' data-price='' data-img='http://javascript.ru/forum/images/smilies/sad.gif'>Выбрать</option>
<option value='Processors-1' data-price='10' data-img='http://javascript.ru/forum/images/smilies/smile.gif'> ЕУІІ 1</option>
<option value='Processors-2' data-price='20' data-img='http://javascript.ru/forum/images/smilies/wink.gif'> ЕУІЕ 2</option>
<option value='Processors-2' data-price='30' data-img='http://javascript.ru/forum/images/smilies/laugh.gif'> ЕУІЕ 3</option>
</select>
</td>
<td><img src='http://javascript.ru/forum/images/smilies/sad.gif'></td>
<td><span></span></td>
</tr>
</table>
</body>
</html>
|
ksa, сделал как у вас - http://prntscr.com/795ode вот что получилось. Код хпх на первой странице в 1 посте
|
makalet, у нас на работе отслеживают интернет-трафик и адреса УРЛ... Да и с ПХП я не работаю, использую другой серверный язык.
|
ksa,:cray: Я за помощь на пивко бы дал
|
ksa, как не пытаюсь поместить картинку и цену в разные td - ничего не получается. http://prntscr.com/79g85m
<tr>
<td>Процессор</td>
<td>
<div class='newselect'>
<select class='chosen' id='chosenmak' name='maker' >
<option value="0" value='' data-price=''>-- Выбрать --</option>
<?php
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="'.$Manufacture.' ">'."$Manufacture"." "."$Model"." '</option>';
}
?>
</select>
</div>
<img src='' name='image_cpu' id='preview'/>
<span ></span>
</td>
</tr>
Подскажите: 1. Когда img и span обертываю в tr, то выводит пустоту. 2. Также, когда выбрано значение "Выбрать", то цена и картинка не скрываются. Как исправить? 3. Вот ваш пример. http://jsfiddle.net/tngebbfx/ Как считать всю стоимость и вывести ее в поле "Итого"? 4. Можно ли как-то взять значение с option (например, ."$Manufacture"." "."$Model"." ) и внедрить в value?? Очень нужно так сделать, чтобы в value заного не прописывать переменные |
echo '<option data-price="'.$Price.'" data-image="'.$photo.'" value="'.$Manufacture.' ">'."$Manufacture"." "."$Model"." '</option>'; Может все таки: echo '<option data-fabric="'.$Manufacture.'" data-image="'.$photo.'" value="'.$Price.' ">'."$Manufacture"." "."$Model"." '</option>'; |
laimas, а что изменилось? Поменял у себя на вашу строку. Ничего
|
Цитата:
|
Сайт который не реклама построен инженерно. То есть коммерцией они не занимаются, ничего не впаривают, типа надо заранее знать что хочешь и просто профтыкать в селектах свои хотелки посматривая время от времени на бюджет.
Вы, или ваш заказчик, подумали что это плохо, что надо сделать более коммерчески и теперь вы пытатесь совместить этот инженерный подход с торгашеским. Да нихера они не совмещаются и не надо ничего совмещать. Забивание телеги товаром ничем не отличается от комплектования компа. Нахера лишние сущности? Все давным-давно отработано и вы можете лишь улучшить, если получится. Короче, у вас есть обычный каталог и в нем есть кнопки Купить. Человеку впаривается товар, он нажимает кнопку Купить - индентификатор и цена валятся в куки. Человек открывает телегу - видит что навалил в нее. Смотрит, сравнивает, редактирует, все как обычно. Интерфейс ему все показывает, считает, дает ссылки и все такое. Затем юзверь жмет кнопку Оформить и готово. |
kostyanet, у меня как раз и есть такое. Категории, пользователь сам покупает нужные ему части, добавление в корзину и т.д.
А типа конфигуратор пк мне надо для сборки, который клиент пожелал, не знающий толком про конфигурацию. Вот и будет продавец, который занимается этим. Может и лишнее, но мне надо. |
При чем тут клиент? Это в бд должно быть определено что к чему подходит и выбрать что не подходит будет просто невозможно. Ну то есть коню ясно что у вас просто специфическая телега, не такая как на сайтах шмоток или интерьеров где человек сам решает что ему подходит, а интерфейс может только подсказывать. Когда речь идет о железках то подсказки перемещаются в определения и все.
Ну или заведите вторую телегу с такой спецификой и соотв. вторую кнопку - Сохранить. Будет тогда 2 - Купить иниипет - и Сохранить - в комплектацию. Комплектаций (папок, namespace'ов) может быть 1 или несколько. |
Ну если вы на сайт машинок зайдете, то как сможете добавить в комплектацию выбранной деревянной модели узлы и агрегаты из фарша другой модели или даже другого бренда. Ну вот, у вас то же самое.
У долбоящеров на том не рекламном сайте почему-то все начинается с монитора. |
Цитата:
|
kostyanet, я это понимаю. Но задача сейчас не в этом же. Вы читали, что мне нужно сделать?
|
Вы не знаете что вам нужно сделать, но как обычно это принято - не признаетесь что не знаете, а цитируете коды, как будто бы знаете и проблема чисто техническая.
Короче, мне вообще по барабану, это ваше дело как вы там не знаете. |
laimas, назначение списка - подобрать комплектующие. http://prntscr.com/79hb8h - выбирается значение. И рядом в столбцах должны отобразиться изображение(при клике переходим на товар для подробности) и цена его.
|
kostyanet, я не говорил, что знаю. Я js не знаю и не скрываю этого.
|
Вот это для чего?
<?php
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="'.$Manufacture.' ">'."$Manufacture"." "."$Model"." '</option>';
}
?>
Кстати, определять переменную $Price = $value['Price']; только ради того, чтобы ее поместить в строку, это просто разводить мусор в коде. И $value['photo'] - это плохо, если это путь. Не надо мне ссылок, я и без них вижу что у вас не определено главного - что определяет товар. Так что его определяет в базе - уникальный идентификатор или цена, или модель, или еще что либо иное? Вот как поймете это, придет просветление того, с чем же должен работать как клиентский скрипт, так и серверный. |
laimas, для вывода всего списка моделей. Модель определять должна.
|
Вобщем нормально делается так: заводится отношение n^M - энное число отношений ко многим и вся комплектация по спецификациям в нее загоняется. Адаптеры с переходниками как-то надо приделать еще. Тогда любой выбор в прошлом работает как фильтр для всех остальных в будущем.
Что касается ответа на вопрос как загрузить все и показывать только то, что выбрано - так: в контейнер для рендера опции пихается хтмл сделанный по параметрам опции. Если параметров нет - пихается пусто. Все просто должно быть. То есть разница лишь в том, что данные уже загружены. Все остальное в точности соответствует схеме загрузки данных по требованию. |
Цитата:
|
kostyanet, может хватит лабуду в постах гнать? Или с корточек встань.
|
Цитата:
|
Кстати, "на подобии" - предлог и пишется слитно и вот так: наподобие - "Тогда **, растопыря ноги наподобие буквы хера и подбочась наподобие ферта, произнёс следующую краткую и выразительную речь." Чуть более сложные предлоги: "в течение" и "в заключение". Запомните чтоб быть грамотнее.
Цитата:
|
kostyanet, именно. Я ж сказал, что новичок. И про говнокод тоже знаю.
laimas, в смысле, определяться? Если на вывод данных, то по имени селекта. Если я понял правильно |
Цитата:
|
Цитата:
Что касается js, то js он вообще, а js для браузера со всей тряхомудией загруженной страницы - в частности. То есть js как скриптовый язык применяется не только в браузерах. Просто через браузеры он стал популярным. В винде вы можете писать скрипты на точно таком же js, только DOM там нет, в ФШ есть DOM и есть js, который оперирует объектами в том самом доме, который никакого отношения к хмтлю само собой. В этом смысле изучать приходится не js, а ту часть, которая сношается с DOM, то есть фактически DOM. Ну вот, зная о такой проперти дом-объекта как innerHTML (еще есть outerHTML) вы пользуетесь парсером браузера чтобы превратить кусок _нового_ хтмля - в часть document obkect model. Вы ему текст - вам рендер текста и элементы. |
Цитата:
|
kostyanet, ты уже достал тут всех своим словесным поносом.
|
kostyanet, я начал на гавнокоде писать. Потом начну с нуля смотреть PDO по учебникам.
|
| Часовой пояс GMT +3, время: 23:46. |