Присвоить 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, спасибо за код, вроде получается. Позже выложу, что сделал, наверняка будет куча неправильностей. |
А как быть, если option с кавычками?
<select id="sel">
<option>красный "шелк"</option>
<option>синий "поезд"</option>
<option>белый</option>
</select>
как тут быть?
var prices = {
красный: 15,
синий: 25,
белый: 30
};
И еще, мне нужны только цифры, я взял только color, без value, и его дальше использую, правильно? |
тут нужна хорошая регулярка, учитывающие все возможные случаи
<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 + '"').replace('_', ' "');
sel.appendChild(obj);
}
document.body.appendChild(sel);
var value = sel.options[0].text;
alert(value +': ' + colorPrices[value.replace(/\"/g, '').replace(' ', '_')]);
sel.onchange = function () {
value = sel.options[sel.selectedIndex].text;
alert(value +': ' + colorPrices[value.replace(/\"/g, '').replace(' ', '_')]);
}
}
</script>
PS: не образец |
Цитата:
|
не совсем понял, что требуется
<script>
window.onload = function () {
var div = document.getElementById('div');
var colorPrices = {
красный_шёлк: 15,
синий_дух: 25,
белый_плен: 30
};
sel = document.createElement('select');
var str = '';
var obj = {};
obj = document.createElement('option');
obj.innerHTML = '--------------------';
sel.appendChild(obj);
for (var i in colorPrices) {
obj = document.createElement('option');
obj.innerHTML = (i + '"').replace('_', ' "');
sel.appendChild(obj);
}
document.body.appendChild(sel);
sel.onchange = function () {
if (this.selectedIndex != 0) {
value = sel.options[sel.selectedIndex].text;
alert(value +': ' + colorPrices[value.replace(/\"/g, '').replace(' ', '_')]);
}
}
}
</script>
|
Форма
<select id="param"> <option value="----">----</option> <option value="красный шёлк">красный шёлк</option> <option value="синий дух">синий дух</option> <option value="белый плен">белый плен</option> </select> Соответственно в js пишем
...
var colorPrices = {
----: 0,
красный_шёлк: 15,
синий_дух: 25,
белый_плен: 30
};
...
Но с тире не срабатывает, как должно. Как быть с тире? Что писать в js над строкой красный_шёлк: 15, |
qazibum, в последнем скрипте, который написал вам bes, при выборе первого элемента списка (с индексом 0) ничего не будет происходить, о чем свидетельствует строка
if (this.selectedIndex != 0) {
кст дефисы в объекте ("----") нужно в кавычки ставить... |
Можно его не добавлять в этот объект
<script>
window.onload = function () {
var div = document.getElementById('div');
var colorPrices = {
красный_шёлк: 15,
синий_дух: 25,
белый_плен: 30
};
sel = document.createElement('select');
var str = '';
var obj = {};
obj = document.createElement('option');
obj.innerHTML = '----';
sel.appendChild(obj);
for (var i in colorPrices) {
obj = document.createElement('option');
obj.innerHTML = (i + '"').replace('_', ' "');
sel.appendChild(obj);
}
document.body.appendChild(sel);
sel.onchange = function () {
if (this.selectedIndex == 0) {
value = '----';
alert(value + ': ' + 0)
} else {
value = sel.options[sel.selectedIndex].text;
alert(value +': ' + colorPrices[value.replace(/\"/g, '').replace(' ', '_')]);
}
}
}
</script>
или добавить
<script>
window.onload = function () {
var div = document.getElementById('div');
var colorPrices = {
first: 0,
красный_шёлк: 15,
синий_дух: 25,
белый_плен: 30
};
sel = document.createElement('select');
var str = '';
var obj = {};
for (var i in colorPrices) {
obj = document.createElement('option');
if (i == 'first') {
obj.innerHTML = '----'
} else {
obj.innerHTML = (i + '"').replace('_', ' "');
}
sel.appendChild(obj);
}
document.body.appendChild(sel);
sel.onchange = function () {
value = sel.options[sel.selectedIndex].text;
if (this.selectedIndex == 0) {
alert(value + ': ' + 0)
} else {
alert(value +': ' + colorPrices[value.replace(/\"/g, '').replace(' ', '_')]);
}
}
}
</script>
|
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 16:17. |