А нельзя ли передавать выбор Select в функцию без AJAX?
Представим, есть Select, в котором выбираем позицию, которая служит параметром для некой функции.
Чтобы эта функция сработала сразу, поймав этот параметр, а не после перезагрузки страницы, без AJAХ никак не обойтись? Существуют ли альтернативы? |
Цитата:
Цитата:
|
можно, но данные должны быть в "скрипте"
<html>
<head>
<title>Related</title>
</head>
<body>
<select id="select">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="related"></div>
</body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
const select = document.getElementById('select')
const related = document.getElementById('related')
const values = {
1: { title: 'one' },
2: { title: 'two' },
3: { title: 'three' },
}
function foo(id) {
return values[id].title
}
setHTML = (id) => related.innerHTML = foo(id)
select.addEventListener('change', function (e) {
setHTML(e.target.options[e.target.options.selectedIndex].value)
})
setHTML(select.options[select.options.selectedIndex].value)
})
</script>
</html>
|
SuperZen,
добавьте пожалуйста параметр run для запуска примера [HTML run][/HTML] |
Вот здесь то, что я склепал
Благодарю за интерес к моей теме.
Вот здесь то, что я склепал: http://bushastry.my1.ru/perem05ch.html После выбора параметра – сообщение о выборе нового параметра. Однако, карта-то не перекрашивается пока. А вот если нажать иконку “Обновить текущую страницу” (речь идет о FireFox), то всё отражается как надо. Но ведь это не годится! Как же добиться работы по-человечески? |
Х3 кто,
продублируйте строки
var pok=sel.options[sel.selectedIndex].value;
var namepok=sel.options[sel.selectedIndex].text;
в
$('.map g').mouseover(function (e) {
var region_data=$(this).data('region');
var pok=sel.options[sel.selectedIndex].value;
var namepok=sel.options[sel.selectedIndex].text;
|
|
:write: по change надо не только pok и namepok менять, но красить блоки заново
|
Х3 кто,
вариант ... замените весь код на это
$(function() {
$("#test").change(function() {
var pok = this.value;
var namepok = this.options[this.selectedIndex].text;
var temp_array = regions.map(function(item) {
return item[pok]
});
var highest_value = Math.max.apply(Math, temp_array);
regions.forEach(function(el) {
var title = el.region_name + "<br>" + namepok + " " + el[pok];
$("#" + el.region_code).css({
"fill": "rgba(0,255,100," + el[pok] / highest_value + ")"
}).data("title", title)
})
}).change();
var info_panel = $('<div class="info_panel">').appendTo("body").hide();
$(".map").on("mouseenter", "g",
function(e) {
var title = $(this).data("title");
info_panel.html(title).show()
})
.mouseleave(function() {
info_panel.hide()
})
.mousemove(function(e) {
var mouseX = e.pageX,
mouseY = e.pageY;
info_panel.css({
top: mouseY - 50,
left: mouseX - info_panel.width() / 2
})
})
});
|
всё заработало как надо в FireFox и Chrome
Я немедленно проверил подходы, предлагаемые уважаемыми SuperZen'ом и Рони.
Ещё позавчера. И почтительно поцокал языком, поскольку действительно всё заработало как надо. Суда по скорости ответов, все эти подходы уже отработаны и широко известны в кругах HTML/JS/CSS-гуру. Всё хорошо работает в FireFox и Chrome. А вот IE не отрисовывает карту вообще. IE действительно не умеет этого делать? |
| Часовой пояс GMT +3, время: 22:56. |