Форум

qazibum · #1 (**permalink**) 13.08.2012, 20:07

Привет.
Есть select, у него несколько пунктов, каждый пункт должен соответствовать своей цифре (цене), эта цифра потом должна быть присвоена переменной ccolor. Пример
<select>
<option value="красный">красный</option>
<option value="синий">синий</option>
<option value="белый">белый</option>
</select>
Каждый цвет имеет свою цену
красный - 15
синий - 25
белый - 30
Если пользователь выбрал синий, значит переменная color должна иметь значение 25.
Какие есть варианты?
Я придумал через value, присваивать value цифру, но что-то у меня не получается. Как это сделать? Плюс этого варианта, что цены будут иногда меняться и менять будет не сложно, значит присваивать надо не цифру, а переменную, которая будет иметь значение цены. value изначально заполнены, как в примере.

oneguy · #2 (**permalink**) 13.08.2012, 20:21

Можно записать цену в значение атрибута value:

<select onchange="color=+this.value;">
<option value="15">красный</option>
<option value="25">синий</o00ption>
<option value="30">белый</option>
</select>

Вы пишете, что это у вас не получается?
Есть ещё 2 варианта.
Записать в атрибут value индекс в массиве цен:

<select onchange="color=prices[this.value];">
<option value="0">красный</option>
<option value="1">синий</option>
<option value="2">белый</option>
</select>

var prices=[15, 25, 30];

Третий вариант: создать объект с парами цвет - цена:

<select onchange="color=prices[this.value];">
<option>красный</option>
<option>синий</option>
<option>белый</option>
</select>

var prices={
  красный: 15,
  синий: 25,
  белый: 30
};

qazibum · #3 (**permalink**) 14.08.2012, 01:05

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

Можно записать цену в значение атрибута value:

<select onchange="color=+this.value;">
<option value="15">красный</option>
<option value="25">синий</o00ption>
<option value="30">белый</option>
</select>

Вы пишете, что это у вас не получается?

Спасибо за ответ.
Можно подробнее первый способ?

lord2kim · #4 (**permalink**) 14.08.2012, 09:16

qazibum,

<html>
<head>
<title></title>
<script>
var color = "";
</script>
</head>
<body>
<select onchange="color=+this.value; alert(color + ' ' + typeof color);">
<option value="15">красный</option>
<option value="25">синий</o00ption>
<option value="30">белый</option>
</select>
</body>
</html>

bes · #5 (**permalink**) 14.08.2012, 09:27

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

<select id="sel">
	<option>красный</option>
	<option>синий</option>
	<option>белый</option>
</select>

<script>
window.onload = function () {
	var sel = document.getElementById('sel');
	
	var prices = {
		красный: 15,
		синий: 25, 
		белый: 30
	};
	var color = prices[sel.value];
	
	alert( sel.value +': ' + color);

	sel.onchange = function () {
		color = prices[this.value];
		alert( this.value +': ' + color);
	}
}
</script>

<script>
window.onload = function () {
	var colorPrices = {
		красный: 15,
		синий: 25, 
		белый: 30
	};

	sel = document.createElement('select');
	var str = '';
	for (var i in colorPrices) {
		str += '<option>' + i + '</option>';
	}
	sel.innerHTML = str;
	document.body.appendChild(sel);

	alert(sel.value +': ' + colorPrices[sel.value]);
	
	sel.onchange = function () {
		alert(sel.value +': ' + colorPrices[sel.value]);
	}
}
</script>

lord2kim · #6 (**permalink**) 14.08.2012, 09:59

bes, в IE не буит робить...

bes · #7 (**permalink**) 14.08.2012, 10:22

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

bes, в IE не буит робить...

ну вывод селекта я подправил, а вот undefined почему в IE выводит этo я чё-то пропустил почему не работает

<script>
window.onload = function () {
	var div = document.getElementById('div');
	var colorPrices = {
		красный: 15,
		синий: 25, 
		белый: 30
	};

	sel = document.createElement('select');
	var str = '';
	var obj = {};
	for (var i in colorPrices) {
		obj = document.createElement('option');
		obj.innerHTML = i;
		sel.appendChild(obj);
	}
	document.body.appendChild(sel);

	var value = sel.options[0].text;
	alert(value +': ' + colorPrices[value]);
	
	sel.onchange = function () {
		value = sel.options[sel.selectedIndex].text;
		alert(value +': ' + colorPrices[value]);
	}
}
</script>

lord2kim · #8 (**permalink**) 14.08.2012, 10:28

bes, это не из-за вывода select-a
IE нужное явное указание value, в отличии от др браузеров которые возвращают text в отсутствии value

bes · #9 (**permalink**) 14.08.2012, 10:46

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

bes, это не из-за вывода select-a
IE нужное явное указание value, в отличии от др браузеров которые возвращают text в отсутствии value

в IE select, также как и table, не позволяет менять своё innerHTML (точнее позволяет, но не воспринимает)
PS: понял, подправил

qazibum · #10 (**permalink**) 14.08.2012, 13:29

Под первым вариантом я подразумевал нечто подобное

var cena0 = 0;
var cena1 = 10;
var cena2 = 20;
pole.options[0].value = cena0;
pole.options[1].value = cena1;
pole.options[2].value = cena2;

Т.е. менять значение value. Но это, как мне кажется не очень правильно.
bes, спасибо за код, вроде получается. Позже выложу, что сделал, наверняка будет куча неправильностей.

Форум

Справочник

Discord чат

Курсы javascript