Как при выборе select вывести количество и стоимость

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

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

Как при выборе значений из select'a(данные берутся из БД) в колонку "Кол-во" и "Цена" - вписывать 1 и стоимость, которая соответствует выбранному значению в списке?
Вот раб. вариант - http://jsfiddle.net/wtvkvqd9/
Хочется сделать как тут http://www.microtron.ua/configure-pc. Выбираем значение и цена выводится, которая надо

@Max_Great_Tanker · 22.05.2015, 08:12

Могу сказать только, что это нужно делать с помощью JavaScript.

@lenk0belk0 · 22.05.2015, 08:37

обратите внимание, что во втором варианте цена уже есть в тексте опции select'а. Т.е. при формировании на сервере к названию добавляйте цену (как вариант, в скобках). А потом уже на клиенте (в браузере) при помощи js вытаскиваете это значение.

@Hyliop · 22.05.2015, 08:40 **[ТС]**

lenk0belk0, а как тогда сделать вывод кол-ва при выборе из селекта? Если ничего не выбрано, то поле с кол-вом убирается

@lenk0belk0 · 22.05.2015, 09:03

В приведенном примере поле с количеством все-таки не убирается, а средствами js делается disabled.
Там в каждой строке у элементов заданы id:
<select id="conf_select_2" .....>
<input id="i_count_2" ......>

Реализовано возможно так: при выборе варианта в secect'е из его id парсится [id] (еще проверяется, какой пункт выбран), ищется input c id="i_count_[id]", и у него убирается или добавляется disabled. Дополнительные условия исходя из потребностей...

@Hyliop · 23.05.2015, 00:40 **[ТС]**

Итак, у меня вот такой код:
Запрос

SQL

1
2
3

$query_get  = ("SELECT * FROM `table` ORDER BY PRICE ASC");
$result_get        = mysql_query($query_get) OR die(mysql_error()); 
while($row_get     = mysql_fetch_assoc($result_get)){  $arr_get[] = $row_get; }

<td>

PHP

echo "<select class='chosen' name='maker' >"; 
echo  '<option value="">-- Выбрать --</option>';
foreach ($arr_get as $value) {
   $ID = $value['ID'];
   $Price= $value['Price'];                                 
 echo  '<option> value="">'."$Price"." "."$ID". '</option>';
}
echo  "</select>";
echo  "</div>";

</td>

HTML5

1 2	<td><input type="hidden" id="c_cpu_" name="count_cpu" value="1"></td> <td><input type="text" id="c_cpu" name="count_cpu" value=""></td>

Как-то надо вывести стоимость в новый столбец и кол-во покупаемого товара( по дефолту надо 1). Стоимость товара должна меняться в зависимости от товара, который выбран в селекте.

@lenk0belk0 · 23.05.2015, 09:35

Hyliop,
У меня похожая штука на jquery. Сначала надо подключить библиотеку.
Код таблицы такой:

PHP

echo "<td>";
echo "<select class='chosen' name='maker' >"; 
echo  '<option value="0">-- Выбрать --</option>';
foreach ($arr_get as $value) {
   $ID = $value['ID'];
   $Price= $value['Price'];                                 
 echo  '<option> value="'.$value['ID'].'">('."$Price".") "."$ID". '</option>';
}
echo  "</select>";
echo "</td>";
echo "<td>";
<td><input type="text" id="c_cpu" name="count_cpu" value="" disabled></td>
echo "</td>";

Добавлено через 15 минут
код, обрабатывающий выбор:

Javascript

$("select").change(function(){
 
        var select = $(this)
        var td = select.parent();
        var id = select.val();
        var price = parseInt(select.find('option:selected').text().split('(')[1].split(')')[0]);
 
        if(id == 0) { // если ничего не выбрано
            td.next().find('input[name="count_cpu"]').val(0);
            td.next().find('input[name="count_cpu"]').attr('disabled',true);
        }
        else {
            td.next().find('input[name="count_cpu"]').val(price);
            td.next().find('input[name="count_cpu"]').attr('disabled',false);
        }
 
    });

ps: я ни разу не спец в js, поэтому будет интересно увидеть комментарии, как можно сделать по-другому

@Hyliop · 23.05.2015, 12:54 **[ТС]**

lenk0belk0, к сожалению, не работает вообще(

Добавлено через 12 минут
Сделал так:

HTML5

1 2	<td><input type="text" id="c_cpu" name="count_cpu" value="1"></td> <td><span class="label" id="pric" value="<?= $Price?>"><?= $Price?></span></td>

Javascript

document.getElementById("c_cpu").style.display = "none";
document.getElementById("pric").style.display = "none";
 function selectChanged() {
             document.getElementById("c_cpu").style.display = "inline-block";
             document.getElementById("pric").style.display = "inline-block";
         }

Выводит так: но стоимость должна соответствовать выбранному товару в селекте. Как это сделать?
Код для селекта:

PHP

<?php                                               
echo "<select class='chosen' id='chosen' name='maker' onChange='javascript:selectChanged();'>"; 
 echo '<option value="">-- Выбрать --</option>';
 foreach ($arr_get as $value) {
    $ID   = $value['ID'];
    $Price  = $value['Price'];
    $Model = $value['Model'];   
    echo '<option value="'.$ID.'">'."$Price"."  грн. ----"." $Manufacture"." "."$Model" .'</option>';                                    
}
echo "</select>";
echo "</div>"; 
?>

@lenk0belk0 · 23.05.2015, 14:51

у выбранной опции в селекте будет псевдокласс :selected
внутри фукции selectCahnged()
получаете элемент по этому классу, получаете его содержимое, парсите оттуда цену, присваиваете атрибуту value у инпута эту цену - вуаля.

не заработал мой код скорее всего потому, что вы не подключили jquery библиотеку.

@Hyliop · 23.05.2015, 20:39 **[ТС]**

lenk0belk0, да подключено. jquery-1.8.1.min.js
Вообще не получается

@Hyliop 1 / 1 / 2 Регистрация: 13.02.2015 Сообщений: 99
	23.05.2015, 20:39 [ТС]	10
	lenk0belk0, да подключено. jquery-1.8.1.min.js Вообще не получается 0

@Max_Great_Tanker 53 / 53 / 22 Регистрация: 31.03.2015 Сообщений: 268
	22.05.2015, 08:12	2
	Могу сказать только, что это нужно делать с помощью JavaScript. 0

@lenk0belk0 7 / 7 / 5 Регистрация: 24.12.2014 Сообщений: 33
	22.05.2015, 08:37	3
	обратите внимание, что во втором варианте цена уже есть в тексте опции select'а. Т.е. при формировании на сервере к названию добавляйте цену (как вариант, в скобках). А потом уже на клиенте (в браузере) при помощи js вытаскиваете это значение. 0

@Hyliop 1 / 1 / 2 Регистрация: 13.02.2015 Сообщений: 99
	22.05.2015, 08:40 [ТС]	4
	lenk0belk0, а как тогда сделать вывод кол-ва при выборе из селекта? Если ничего не выбрано, то поле с кол-вом убирается 0

@lenk0belk0 7 / 7 / 5 Регистрация: 24.12.2014 Сообщений: 33
	22.05.2015, 09:03	5
	В приведенном примере поле с количеством все-таки не убирается, а средствами js делается disabled. Там в каждой строке у элементов заданы id: <select id="conf_select_2" .....> <input id="i_count_2" ......> Реализовано возможно так: при выборе варианта в secect'е из его id парсится [id] (еще проверяется, какой пункт выбран), ищется input c id="i_count_[id]", и у него убирается или добавляется disabled. Дополнительные условия исходя из потребностей... 0

@lenk0belk0 7 / 7 / 5 Регистрация: 24.12.2014 Сообщений: 33
	23.05.2015, 14:51	9
	у выбранной опции в селекте будет псевдокласс :selected внутри фукции selectCahnged() получаете элемент по этому классу, получаете его содержимое, парсите оттуда цену, присваиваете атрибуту value у инпута эту цену - вуаля. не заработал мой код скорее всего потому, что вы не подключили jquery библиотеку. 0

Опции темы