Присвоить value значение или как?
Привет.
Есть select, у него несколько пунктов, каждый пункт должен соответствовать своей цифре (цене), эта цифра потом должна быть присвоена переменной ccolor. Пример <select> <option value="красный">красный</option> <option value="синий">синий</option> <option value="белый">белый</option> </select> Каждый цвет имеет свою цену красный - 15 синий - 25 белый - 30 Если пользователь выбрал синий, значит переменная color должна иметь значение 25. Какие есть варианты? Я придумал через value, присваивать value цифру, но что-то у меня не получается. Как это сделать? Плюс этого варианта, что цены будут иногда меняться и менять будет не сложно, значит присваивать надо не цифру, а переменную, которая будет иметь значение цены. value изначально заполнены, как в примере. |
Можно записать цену в значение атрибута 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,
<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> |
рекомендую третий вариант, так как легко и понятно можно изменять цены, можно даже оттуда же содержимое 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>
|
bes, в IE не буит робить...
|
Цитата:
<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>
|
bes, это не из-за вывода select-a
IE нужное явное указание value, в отличии от др браузеров которые возвращают text в отсутствии value |
Цитата:
PS: понял, подправил |
Под первым вариантом я подразумевал нечто подобное
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, спасибо за код, вроде получается. Позже выложу, что сделал, наверняка будет куча неправильностей. |
| Часовой пояс GMT +3, время: 12:14. |