Значение из select option
Есть такая часть кода:
e.forEach(function (e) {
t.forEach(function (t) {
var months = 1;
var value = 1;
e == t.id ?
$('<div class="unit" data-id="' + t.id + '"><div class="billboard-address">' + t.address +
'<a href="" class="close"></a></div><label style="margin: 0 14px 0 0; display: inline-block;' +
' float: right;"><input type="checkbox" name="need_design" value="1" checked="checked" ' +
'style="width: 14px;"><div class="label">Разработать макет рекламного щита</div></label>' +
'<div class="test">Стоимость аренды щита за 1 месяц: ' + t.price + '</div>' +
'<div class="test">Срок размещения в месяцах: <script>function displayVals' + t.id +
'(){value = $( "#select' + t.id + '" ).val();};' +
'$( "select' + t.id + '" ).change( displayVals' + t.id + ' );displayVals' + t.id +
'();</script><select id="select' + t.id +
'" onChange="displayVals' + t.id + '(); alert(value);">' +
'<option value="1">1</option><option value="2">2</option><option value="3">3</option>' +
'<option value="4">4</option><option value="5">5</option><option value="6">6 (скидка -6%)</option>' +
'<option value="7">7 (скидка -7%)</option><option value="8">8 (скидка -8%)</option>' +
'<option value="9">9 (скидка -9%)</option><option value="10">10 (скидка -10%)</option>' +
'<option value="11">11 (скидка -11%)</option><option value="12">12 (скидка -12%)</option>' +
'</select>' +
'<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' +
'</div></div></div>').prependTo("#request-form .selected-billboards .list")
: r.push(e)
})
}),
Прошу прощение за неудобоваримость кода, пишу как умею.. При изменении select option у меня вылетает окошка alert'ом, и в нем отображается правильное текущее value. А как эту value динамически менять вот в этом месте: ... '<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' + ...Чтобы при изменении select option value - сразу показывалось итоговое значение? |
Я правильно понял, ты для каждого селекта создаешь отдельную обрабатывающую функцию displayVals + t.id?
Достаточно одной, в которую ты будешь передавать указатель на селект, а в ней уже получать его значение и заносить в соотв. место. <select ... onChange="displayVals(this); > |
Цитата:
--- upd. Нет, при Вашем способе по смене select не проходит alert. Т.е. в данном случае, наверное, все же нужно указывать как я писал в начале топика... |
Без кода я не подскажу почему не работает :)
Оптимальный вариант - после формирования структуры(скрипты вписывать не нужно) вешаешь на все селекты обработчик $('div.unit select').on('change', function() {
alert($(this).val());
//делаем что нужно
});
|
Цитата:
Часть 1: function arrayObjectIndexOf(e, t, r) {
for (var a = 0, o = e.length; o > a; a++)
if (e[a][r] === t) return a;
return -1
}
function triads(e) {
return e = e.toString(), e.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1 ")
}
function jsTils(e, t) {
var r;
return count = e % 100, count >= 5 && count <= 20 ? r = t[2] : (count %= 10, r = 1 == count ? t[0] : count >= 2 && count <= 4 ? t[1] : t[2]), r
}
function localstorageGet(e) {
return Modernizr.localstorage ? lscache.get(e) ? lscache.get(e) : (localStorage.clear(), !1) : void 0
}
function localstorageSet(e, t, r) {
Modernizr.localstorage && lscache.set(e, JSON.stringify(t), 1440), (r = r || function() {})()
}
$(function() {
function e(e) {
a.slideUp(300), a.eq(e).slideDown(300, function() {
_billboards_map_ && _billboards_map_.container.fitToViewport()
})
}
function t() {
$activeBtn = r.filter(".active"), index = r.index($activeBtn), e(index)
}
var r = $(".tabs-btn>a.tab-btn"),
a = $(".tabs>.tab");
t(), r.click(function(e) {
e.preventDefault(), $(this).is(".active") || (r.removeClass("active"), $(this).addClass("active"), _mapMarkers_.forEach(function(e) {
e.marker.balloon.close()
}),
t())
})
});
var _mapMarkers_ = [],
_billboards_map_;
$(function() {
function e() {
var e = localstorageGet("billboards_ids");
$(".billboards #list-view tr").removeClass("ordered"),
_mapMarkers_.forEach(function(e) {
var t = e.marker.properties.get("type");
e.marker.properties.set("btn_type", "Заказать"),
e.marker.properties.set("ordered", ""),
e.marker.options.set("iconImageHref", o[t])
}),
e && e.forEach(function(e) {
$(".billboards #list-view tr[data-id=" + e + "]").addClass("ordered"),
_mapMarkers_.forEach(function(t) {
if (e == t.id) {
var r = t.marker.properties.get("type");
t.marker.properties.set("btn_type", "Отменить"),
t.marker.properties.set("ordered", "ordered"),
t.marker.options.set("iconImageHref", i[r])
}
})
});
r();
}
function t() {
var e = localstorageGet("billboards_ids"),
t = 0,
r = 0;
if (e) {
e.forEach(function(e) {
billboards_json.items.forEach(function(a) {
e == a.id && (t += 1, r += a.price)
})
});
var a = jsTils(t, ["Выбран ", "Выбрано ", "Выбрано "]) + t + jsTils(t, [" щит", " щита", " щитов"]);
r = triads(r), s.find(".count").text(a), s.find(".numbers").text(r + " рублей."), 0 == t ? s.hide() : s.show()
} else s.hide()
}
function r() {
"undefined" != typeof billboards_json && localstorageSet("billboards_json", billboards_json.items)
}
function a() {
if ($("#request-form .selected-billboards").size()) {
var e = localstorageGet("billboards_ids"),
t = localstorageGet("billboards_json");
if (e && t && e.length > 0) {
var r = [];
e.forEach(function (e) {
var months = 1;
var value = 1;
t.forEach(function (t) {
e == t.id ?
$('<div class="unit" data-id="' + t.id + '"><div class="billboard-address">' + t.address +
'<a href="" class="close"></a></div><label style="margin: 0 14px 0 0; display: inline-block;' +
' float: right;"><input type="checkbox" name="need_design" value="1" checked="checked" ' +
'style="width: 14px;"><div class="label">Разработать макет рекламного щита</div></label>' +
'<div class="test">Стоимость аренды щита за 1 месяц: ' + t.price + '</div>' +
'<div class="test">Срок размещения в месяцах: <script>function displayVals' + t.id +
'(){var value = $( "#select' + t.id + '" ).val();};' +
'$( "select' + t.id + '" ).change(displayVals' + t.id + ');displayVals' + t.id +
'();</script><select id="select' + t.id +
'" onChange="displayVals' + t.id + '(); alert(value*' + t.price + ');">' +
'<option value="1">1</option><option value="2">2</option><option value="3">3</option>' +
'<option value="4">4</option><option value="5">5</option><option value="6">6 (скидка -6%)</option>' +
'<option value="7">7 (скидка -7%)</option><option value="8">8 (скидка -8%)</option>' +
'<option value="9">9 (скидка -9%)</option><option value="10">10 (скидка -10%)</option>' +
'<option value="11">11 (скидка -11%)</option><option value="12">12 (скидка -12%)</option>' +
'</select>' +
'<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' +
'</div></div></div>').prependTo("#request-form .selected-billboards .list")
: r.push(e)
})
}),
|
Часть 2:
} else var n = "Доступен";
var l = new ymaps.Placemark(i.position, {
type: i.type,
address: i.address,
reserved: n,
strong: s,
price: triads(i.price),
photo: i.photo,
id: i.id,
btn_type: "Заказать",
ordered: ""
}, {
balloonContentLayout: r,
balloonPanelMaxMapArea: 0,
balloonMaxWidth: 500,
iconLayout: "default#image",
iconImageHref: o[i.type],
iconImageSize: [53, 65],
iconImageOffset: [-26, -65]
});
l.events.add("balloonopen", function() {}), _mapMarkers_.push({
id: i.id,
position: i.position,
marker: l
}), t.geoObjects.add(l), e()
})
});
var s = $(".tabs-btn .selected");
if ("undefined" != typeof billboards_json) {
var n = ".billboards #list-view .order a, .billboard-mark .order";
$(document).on("click", n, function(r) {
var a = $(this).closest("tr").attr("data-id") || $(this).attr("data-id");
if (localstorageGet("billboards_ids"))
var o = localstorageGet("billboards_ids");
else
var o = [];
if ($(this).is(".ordered") || $(this).closest("tr").is(".ordered")) {
var o = localstorageGet("billboards_ids");
o.splice(o.indexOf(a), 1)
} else -1 == o.indexOf(a) && o.push(a);
localstorageSet("billboards_ids", o), r.preventDefault(), t(), e()
}), t(), e()
}
$(".billboards #list-view .price .numbers").each(function() {
var e = $(this).text();
$(this).text(triads(e))
}), r(), $(document).on("click", "#request-form .selected-billboards .unit .close", function(e) {
var t = $(this).closest(".unit").attr("data-id"),
r = localstorageGet("billboards_ids");
r.splice(r.indexOf(t), 1);
var o = $(this);
localstorageSet("billboards_ids", r, function() {
o.closest(".unit").fadeOut(300, function() {
0 == r.length && a()
})
}), e.preventDefault()
}), a(), $("#request-form").validate({
rules: {
org: "required",
phone: "required"
},
messages: {
org: "Обязательное поле",
phone: "Обязательное поле"
},
submitHandler: function(e) {
var t = localstorageGet("billboards_ids");
return t.length > 0 ? ($.ajax({
type: $(e).attr("method"),
url: $(e).attr("action"),
dataType: "json",
data: $(e).serialize() + "&" + $.param({
billboards: t
})
}).done(function(e) {
jsonResponse = e, 1 == jsonResponse.status ? ($("#request-form .wrapper").slideUp(), $("#request-form .final").slideDown(), t = [], localstorageSet("billboards_ids", t)) : alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}).fail(function() {
alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}), $("#request-form button").prop("disabled", !0)) : $("#request-form .selected-billboards .title").css({
color: "red"
}), 0 == $(".selected-billboards").size() && ($.ajax({
type: $(e).attr("method"),
url: $(e).attr("action"),
dataType: "json",
data: $(e).serialize()
}).done(function(e) {
jsonResponse = e, 1 == jsonResponse.status ? ($("#request-form .wrapper").slideUp(), $("#request-form .final").slideDown()) : alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}).fail(function() {
alert("Произошёл сбой. Пожалуйста попробуйте ещё раз.")
}), $("#request-form button").prop("disabled", !0)), !1
},
invalidHandler: function() {
var e = localstorageGet("billboards_ids");
e.length <= 0 && $("#request-form .selected-billboards .title").css({
color: "red"
})
}
}), $("body.billboards #list-view td.photo a.address").click(function(e) {
e.preventDefault();
var t = $(this).closest("tr").attr("data-id");
$(".tabs-btn .map-view").click(), setTimeout(function() {
_mapMarkers_.forEach(function(e) {
e.id == t && (_billboards_map_.setZoom(18), _billboards_map_.setCenter(e.position), e.marker.balloon.open())
})
}, 500)
})
}), $(function() {
function e(e, t) {
t = t || function() {};
var r = e.magnificPopup({
type: "image",
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.image.markup = this.st.image.markup.replace("mfp-figure", "mfp-figure mfp-with-anim"), this.st.mainClass = "mfp-move-from-top"
},
close: function() {
t()
}
},
closeOnContentClick: !0,
showCloseBtn: !1,
tLoading: "Загрузка..."
});
return r
}
e($("#list-view td.photo a.photo")), $(document).on("click", ".billboard-mark .photo", function(t) {
t.preventDefault(), e($(this)).magnificPopup("open")
}), $(".content-wrapper .photos").magnificPopup({
delegate: "a",
type: "image",
gallery: {
enabled: !0,
tPrev: "Предыдущая (Стрелка влево)",
tNext: "Следующая (Стрелка вправо)",
tCounter: '<span class="mfp-counter">%curr% из %total%</span>'
},
callbacks: {
beforeOpen: function() {
this.st.image.markup = this.st.image.markup.replace("mfp-figure", "mfp-figure mfp-with-anim"), this.st.mainClass = "mfp-move-from-top"
}
},
image: {
titleSrc: "title"
}
})
}), $(function() {
ymaps.ready(function() {
var e = new ymaps.Map($("body.index .small-map, body.contacts .map")[0], {
center: [47.24470432, 39.72322986],
zoom: 18
}),
t = new ymaps.Placemark([47.24470432, 39.72322986], {}, {
iconLayout: "default#image",
iconImageHref: tribuna_theme_path_ + "/images/ico-marker-mark.png",
iconImageSize: [50, 73],
iconImageOffset: [-25, -73]
});
e.geoObjects.add(t), e.controls.remove("mapTools"), e.controls.remove("scaleLine"), e.controls.remove("searchControl"), e.controls.remove("trafficControl")
})
}),
$(function() {
$(".contacts-form").validate({
rules: {
name: "required",
phone: "required",
content: "required"
},
messages: {
name: "Обязательное поле",
phone: "Обязательное поле",
content: "Обязательное поле"
},
submitHandler: function(e) {
return $.ajax({
type: $(e).attr("method"),
url: $(e).attr("action"),
data: $(e).serialize()
}).done(function() {
$(".contacts-form .wrapper").slideUp(),
$(".contacts-form .final").slideDown()
}), !1
}
})
});
Разбил на две части, т.к. форум не дает возможности выложить более 10000 символов в одном сообщении, а тега SPOILER я не нашел((( |
'<div class="new-price">Итоговая цена по данному щиту: <span>' + months*t.price*value + '</span>' здесь все из span убираем, monts и t.price - записывать значения в тег new-price (data-month и data-price) получится чтото вроде '<div class="new-price" data-month="'+months+'" data-price="'+t.price+'" >Итоговая цена по данному щиту: <span></span>' и доделываем наш обработчик селектов: $('div.unit select').on('change', function() {
var month = $(this).next('div.new-price').data('month');
var price = $(this).next('div.new-price').data('price');
var x= month*price*$(this).val(); //вычисляем значение
$(this).next('div.new-price').find('span').html(x); //заносим новое значение
});
|
Spass,
Оффигительно простое и крутое решение))) Спасибо!! Все работает, уже прикрутил сверх того свои условия)))) Спасибо! :-) |
Пожалуйста.
На будущее отделяй мух от котлет (js от html), и все будет намного проще. |
Цитата:
Есть еще подобный вопрос, как теперь можно отловить все итоговые значения каждого товара и просуммировать их.. Т.е. это должна быть функция внутри функции $('div.unit select').on('change', function(), правильно? --- С этим сам разобрался :) var sumCost = 0, sumDiscount = 0;
$('.shield-price').each(function(){
sumCost += parseInt($(this).html(), 10);
});
$('.final-cost').html('Итого: <span>'+sumCost+'</span> руб.');
$('.shield-discount').each(function(){
sumDiscount += parseInt($(this).html(), 10);
});
$('.final-discount').html('Итоговая скидка: <span>'+sumDiscount+'</span> руб.');
Однако, если все значения seect выставить в 1, т.е. в то положение, когда самой скидки нет - то остается последнее значение скидки.. вместо нуля(((( Так понимаю, нужна проверка на значение всех и каждого select option val, верно? |
| Часовой пояс GMT +3, время: 10:24. |