|
Работа с раскрывающимся списком
Добрый день.
Создан раскрывающийся список средствами JS:
var CheckColor = function myPrice() {
var x = document.createElement("SELECT");
x.setAttribute("id", "mySelect");
document.body.appendChild(x);
var z = document.createElement("option");
z.setAttribute("color", "green");
var t = document.createTextNode("Зеленый");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
var z = document.createElement("option");
z.setAttribute("color", "red");
var t = document.createTextNode("Красный");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
var z = document.createElement("option");
z.setAttribute("color", "blue");
var t = document.createTextNode("Синий");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
}
Далее будет функция, которая считает стоимость в зависимости от введенной площади, исходя из цены 1кв.м. Но стоимость 1 кв.м. разная, зависит от выбранного цвета. Как можно обратиться к атрибуту с цветом из другой функции - направьте, пожалуйста. |
ZMA,
а создать нормальный option никак? |
рони, опции созданы теперь отдельно.
Но в коде что-то не так. Предполагается, что пользователь вводит 2 значения: высота и ширина. Считается автоматом, без клавиши submit. Также хотелось бы добавить доп. функцию: при вводе пользователем размера площадью <= 0,4 кв.м. к coefficient автоматом прибавляется 10%. Как понимаю, через через дополнительный if, куда вставить, подскажите. Кто может, проверьте, помогите, пожалуйста.
var options = [
{
value: 'red',
coefficient: 1,
text: 'красный'
},
{
value: 'green',
coefficient: 1.2,
text: 'зеленый'
},
{
value: 'blue',
coefficient: 2.5,
text: 'синий'
},
];
var output = $('#output');
function createOption(obj) {
var option = document.createElement('option');
var text = document.createTextNode(obj.text);
option.appendChild(text);
option.value = obj.value;
option.dataset.coefficient = obj.coefficient;
return option;
}
function createSelect(obj) {
var select = document.createElement('select');
select.id = 'mySelect';
obj.forEach(function(option) {
select.appendChild(createOption(option));
});
document.body.appendChild(select);
}
function calculate(height, width, coefficient) {
return height * width * coefficient;
}
createSelect(options);
$('#height, #width, #coefficient').on('keyup', function(){
var height = $('#height').val() * 1;
var width = $('#width').val() * 1;
var select = document.getElementById('mySelect');
var coefficient = select.options[select.selectedIndex].dataset.coefficient;
if(!isNaN(height) && !isNaN(width)){
output.html('Цена: ' + calculate(height * width* coefficient).toFixed(2) + ' руб.');
} else {
output.html('Не верный формат!');
}
});
<form action="" id="form">
<input type="text" id="height">
<input type="text" id="width">
<ul id="output"></ul>
</form>
|
калькулятор площади
ZMA,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var options = [
{
value: 1,
text: 'красный'
},
{
value: 1.2,
text: 'зеленый'
},
{
value: 2.5,
text: 'синий'
}
];
function createOption(obj) {
return new Option(obj.text, obj.value)
}
function createSelect(obj) {
var select = document.createElement("select");
select.id = "mySelect";
obj.forEach(function(option) {
select.appendChild(createOption(option))
});
return form.insertBefore(select, output)
}
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 0 && (h = 0);
w < 0 && (w = 0);
h = h * w;
h <= .4 && (c *= 1.1);
h *= c;
output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
output = document.querySelector("#output"),
width = document.querySelector("#width"),
height = document.querySelector("#height"),
select = createSelect(options);
form.addEventListener("input", calculate);
form.addEventListener("change", calculate);
});
</script>
</head>
<body>
<form action="" id="form" >
<input type="text" id="height">
<input type="text" id="width">
<p id="output"></p>
</form>
</body>
</html>
|
рони, спасибо огромнейшее.
|
рони, можно еще вопрос.
Пытаюсь добавить, чтобы при вводе числа меньше min/max, автоматом происходила замена на min/max число. Причем на w и h min и max разные. добавляю replace var h= +height.value.replace(/\D/g,'')||0; , if'ы <>, onblur/onchange в input, но безрезультатно. |
ZMA,
Вот же у вас проверка на min h < 0 && (h = 0); w < 0 && (w = 0); Поставьте вместо нулей нужные значения min Аналогично и по max. Ну и исправить в инпутах height.value = h.toString(); width.value = w.toString(); |
Dilettante_Pro, к сожалению, это ограничивает только расчет.
Т.е., если вы установите max 200, а значение будет введено 305, то посчитается как 200, но значение пользователь так и будет видеть 305. Хотелось бы, чтобы 305 менялось на 200 (установленный max) автоматически. |
h < 10 && (h = 10); w < 20 && (w = 20); h > 200 && (h = 200); w > 250 && (w = 250); height.value = h.toString(); width.value = w.toString(); Только обработчик на input лучше убрать - не даст ввести изменения в случае ошибки |
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var options = [
{
value: 1,
text: 'красный'
},
{
value: 1.2,
text: 'зеленый'
},
{
value: 2.5,
text: 'синий'
}
];
function createOption(obj) {
return new Option(obj.text, obj.value)
}
function createSelect(obj) {
var select = document.createElement("select");
select.id = "mySelect";
obj.forEach(function(option) {
select.appendChild(createOption(option))
});
return form.insertBefore(select, output)
}
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 10 && (h = 10);
w < 20 && (w = 20);
h > 200 && (h = 200);
w > 250 && (w = 250);
height.value = h.toString();
width.value = w.toString();
h = h * w;
h <= 400 && (c *= 1.1);
h *= c;
output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
output = document.querySelector("#output"),
width = document.querySelector("#width"),
height = document.querySelector("#height"),
select = createSelect(options);
// form.addEventListener("input", calculate);
form.addEventListener("change", calculate);
});
</script>
</head>
<body>
<form action="" id="form" >
<input type="text" id="height">
<input type="text" id="width">
<p id="output"></p>
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 07:44. |
|