Javascript-форум - Тупик... Вставка данных в зависимости от SELECT

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Тупик... Вставка данных в зависимости от SELECT (https://javascript.ru/forum/dom-window/27885-tupik-vstavka-dannykh-v-zavisimosti-ot-select.html)

Тупик... Вставка данных в зависимости от SELECT

Код:

$querynotebook = "SELECT notebook.name, notebook.price FROM notebook";

$notebook = mysql_query($querynotebook) or die(mysql_error());

Теперь создаю выпадающий список Select, чтобы иметь возможность выбирать НАИМЕНОВАНИЯ:

Код:

<select name="">

<option value="def" selected>Сделайте выбор

<option>Тут хочу сделать наименования 1</option>

<option>Тут хочу сделать наименования 2</option>

<option>Тут хочу сделать наименования 3</option>

<option>Тут хочу сделать наименования 4</option>

...

</select>

C помощью цикла while, генерирую option с наименованиями:

Код:

<?php 

while ($rownotebook=mysql_fetch_array($notebook)) 

       { 

         echo "<option>".$rownotebook['name']."</option>";

       }

?>

Получается все красиво:

А вот теперь я хочу, например, вывести еще и стоимость. Ну тут понятно:
Просто переписываем так

Код:

echo "<option>".$rownotebook['name'].",".$rownotebook['price']."</option>";

Получаем:

А что, если я хочу не через запятую, а вот так:

Код:

<table><tr><td>

<select>

<option value="def" selected>Сделайте выбор

<?php 

while ($rownotebook=mysql_fetch_array($notebook)) 

       { 

         echo "<option>".$rownotebook['name']."</option>";

       }

?>

</select>

</td>

<td>КАК СЮДА ПОСТАВИТЬ СТОИМОСТЬ?</td>

</tr></table>

ps. Вот что дает print_r($rownotebook); после mysql_fetch_array:

Код:

Array

(

    [0] => Dell

    [name] => Dell

    [1] => 300

    [price] => 300

 )

Естественно, стоимость должна меняться сразу посредством js.

Цитата:

Сообщение от xaocbozzz

<td>КАК СЮДА ПОСТАВИТЬ СТОИМОСТЬ?</td>

<html>
<body>
<table style="border:1px solid #888888"><tr>
	<td>
	<select id="sel">
	<option value="def" selected>Сделайте выбор
	<option>Dell</option>
	<option>Asus</option>
	<option>Lenovo </option>
	</select>  
	</td>  
      
	<td id="result" width="40px">  
    
	</td>    
</tr>
  
<script>
var price = ['',300,400,500]; // формировать в PHP
  
var sel = document.getElementById("sel");
sel.onchange = function()
 {
 var s = price[sel.selectedIndex];
   //alert(s);   
 var r = document.getElementById("result");
 r.innerHTML = s;  
 };
</script>
</body>
</html>

Спасибо. Только вот это не ясно:
var price = ['',300,400,500]; // формировать в PHP

Сделал! Вот как:
В <select> добавил id (<select id="sel">), чтобы можно было оперировать им в javascript.
В <td> таблицы также назначил id="result", сюда будет выводиться стоимость.
Затем в цикл while добавил $noteprice[] = $rownotebook[1], чтобы получать данные из запроса в массив $noteprice.
Вот код:

Код:

<table><tr><td>

<select id="sel">

<option value="def" selected>Сделайте выбор

<?php 

while ($rownotebook=mysql_fetch_array($notebook)) 

       { 

         echo "<option>".$rownotebook['name']."</option>";

         $noteprice[] = $rownotebook[1];

       }

?>

</select>

</td>

<td id="result"></td>

</tr></table>

Затем написал код на js ниже (обязательно ниже!) цикла while:

Код:

<script>

var price =['',<?php echo implode(",", $noteprice); ?>];

var sel = document.getElementById("sel");

sel.onchange = function()

 {

 var s = price[sel.selectedIndex];

 var r = document.getElementById("result");

 r.innerHTML = s; 

 };

</script>

Разберем этот код:
Создаем массив в js по типу var price = [a,b,c,d,...]. Но в качестве значений (a,b,c,d,...) мы берем то, что "отдал" нам php: <?php echo implode(",", $noteprice); ?>. Что отдает нам php? При помощи функции implode массив $noteprice соединяется в строку, используя запятую между значениями. То есть он в моем случае отдает 300,400,500
Ну а так как первый option у меня не должен иметь какое-либо значение (<option value="def" selected>Сделайте выбор), первое значение массива для js мы определим как "пустое место" (одинарные кавычки без значения).

Код:

var price = ['',<?php echo implode(",", $noteprice); ?>];

Теперь определим переменную, например, sel. Она будет присваивать наш select по его id

Код:

var sel = document.getElementById("sel");

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

Код:

sel.onchange = function()

Что происходит при выборе чего-нибудь в select? Переменной s (например) будет присваиваться значение, которое соответствует выборке из массива price[]. Где значение между квадратными скобками - выбранный пункт в select'е

Код:

var s = price[sel.selectedIndex];

Также в этой же функции определяется переменная, допустим, r. Ей присваивается значение, которое соответствует нашему месту в таблице (в ячейке td) согласно указанному id="result"

Код:

var r = document.getElementById("result");

Теперь просто "говорим", что нужно ввести данные (innerHTML) в место, определенное переменной r. Данные должны соответствовать полученному значению при помощи переменной s

Код:

r.innerHTML = s;

Вот и все. Если я где то неправильно что-то описал - пожалуйста, поправьте меня. Я только учусь )