11.05.2014, 00:02
|
|
Интересующийся
|
|
Регистрация: 10.05.2014
Сообщений: 11
|
|
|
Обработка select-ов
Добрый вечер, подскажите пожалуйста, есть несколько селектов:
<select class="filtered" name="13" id="73">
<option value="">Все</option>
<option value="152">90x190</option>
<option value="154">90x200</option>
<option value="166">120x190</option>
</select>
<select name="option[1016]" id="55">
<option value="22503" >90x190</option>
<option value="22504" >90x200</option>
<option value="22505" >120x190</option>
</select>
<select name="option[504]" id="55">
<option value="201" >90x190</option>
<option value="202" >90x200</option>
<option value="203" >120x190</option>
</select>
Как с помощью скрипта сделать так, чтобы если в первом селекте значение по-умолчанию - ничего не делать, а если что-то выбрали, то выбрать такие-же значения в других селектах?
Пытался что-то своять, но дальше сдвинуться не могу:
<script type='text/javascript'>
(function () {
"use strict";
jQuery(function () {
$( '#73' ).change(function () {
var sell_id = $( this ).val();
if (sell_id == 0) { return; }
</script>
|
|
11.05.2014, 00:30
|
 |
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
<body>
<select class="filtered" name="13" id="73">
<option value="">Все</option>
<option value="152">90x190</option>
<option value="154">90x200</option>
<option value="166">120x190</option>
</select>
<select name="option[1016]" id="55">
<option value="22503">90x190</option>
<option value="22504">90x200</option>
<option value="22505">120x190</option>
</select>
<select name="option[504]" id="56">
<option value="201">90x190</option>
<option value="202">90x200</option>
<option value="203">120x190</option>
</select>
<script>
var sel = document.getElementById("73");
var sel1 = document.getElementById("55");
var sel2 = document.getElementById("56");
sel.onchange = function () {
var txt = this.options[this.selectedIndex].text;
selected(sel1, txt);
selected(sel2, txt);
}
function selected(el, txt) {
for (var i = 0; i < el.options.length; i++) {
if (el.options[i].text == txt) {
el.options[i].selected = true;
return;
}
}
el.options[0].selected = true;
};
</script>
</body>
id элементов должны быть оригинальные 
|
|
11.05.2014, 00:32
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
deltaman,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
var $selects = $('select').not('#73');
$('#73').change(function () {
var sell_id = $(this).val(),
text = $("option[value='" + sell_id + "']", this).text();
$selects.each(function (indx, element) {
var val = $("option:contains('" + text + "')", element).val();
val && $(element).val(val)
});
})
})
</script>
</head>
<body>
<select class="filtered" name="13" id="73">
<option value="">Все</option>
<option value="152">90x190</option>
<option value="154">90x200</option>
<option value="166">120x190</option>
</select>
<select name="option[1016]" id="55">
<option value="22503" >90x190</option>
<option value="22504" >90x200</option>
<option value="22505" >120x190</option>
</select>
<select name="option[504]" id="55">
<option value="201" >90x190</option>
<option value="202" >90x200</option>
<option value="203" >120x190</option>
</select>
</body>
</html>
Последний раз редактировалось рони, 11.05.2014 в 03:33.
|
|
11.05.2014, 01:46
|
|
Интересующийся
|
|
Регистрация: 10.05.2014
Сообщений: 11
|
|
|
Спасибо Всем большое, действительно работают! Вариант от Рони вроде больше подходит, так как не использует id. Есть проблемка только, "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" конфликтует с используемой на сайте "jquery-1.7.1.min.js". Если задействовать jquery.min.js, то грохается всё, банеры, верстка, скрипты другие, а если родную оставить - jquery-1.7.1.min.js, то обработка селектов не работает. Может есть какой-нибудь способ их подружить?
|
|
11.05.2014, 02:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
deltaman,
попробуйте 1.9.1 вместо 1.7.1
|
|
11.05.2014, 03:09
|
|
Интересующийся
|
|
Регистрация: 10.05.2014
Сообщений: 11
|
|
|
Пробовал, все что нашел, ничего кроме 1.7.1.mini не работает
|
|
11.05.2014, 03:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
deltaman,
код выше работает с любыми версиями jquery -- может вы грузите сразу две версии?
|
|
11.05.2014, 23:46
|
|
Интересующийся
|
|
Регистрация: 10.05.2014
Сообщений: 11
|
|
|
Спасибо всем кто откликнулся, сегодня попробовал прикрутить это на сайт. Обнаружились нюансы:
Вызов функции по change делать нельзя, мешаются уже имеющиеся скрипты, которые используя ajax, без перезагрузки страницы формируют на ней список селектов(select[name^=option]), исходя из выбора в селекте #73.
То есть, выбирая в селекте #73 - 90х190, мы формируем некий список селектов (у которых в наборе обязательно есть 90х190) которые подгружаются на страницу. Но кроме 90х190 у подгружаемых селектов есть еще другие значения, у одних больше у других меньше и порядок расположения описаний непредсказуем.
В связи с этим, есть предположение, что функцию нужно запускать после того как ajax подгрузит все селекты, потом просто смотрим что стоит в #73, то и устанавливаем.
Второй вариант, прикрепить функцию к каждому селекту, так как php код у них общий, чтобы она срабатывала непосредственно при формировании его и глядя на то, что стоит в #73, выбирала бы такое же "описание".
Подскажите пожалуйста, как выкрутиться в этом случае?
Может как-то по "страница загружена, выполнить"
|
|
|
|
