Взаимосвязанные выпадающие списки

@deltaman · Регистрация: 10.05.2014

Студворк — интернет-сервис помощи студентам

Добрый вечер, подскажите пожалуйста, есть несколько селектов:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

Как с помощью скрипта сделать так, чтобы если в первом селекте значение по-умолчанию - ничего не делать, а если что-то выбрали, то выбрать такие-же значения в других селектах?
Пытался что-то своять, но дальше сдвинуться не могу:

HTML5
1
2
3
4
5
6
7
8
9
10
<script type='text/javascript'> 
(function () {
    "use strict";
    jQuery(function () {
        $( '#73' ).change(function () {
            var sell_id = $( this ).val();
            if (sell_id == 0) { return; }
 
            
</script>

@Lazy_Den · 11.05.2014, 14:02

Сообщение от deltaman

выбрать такие-же значения в других селектах

В вашем коде, я не заметил хоть одного совпадающего значения в разных списках, поэтому есть несколько предположений:
1. Выбирать и сравнивать надо не значения списков, а их "описание", т.е. ту текстовую часть, которая находится в тегах <select>
2. Выбирать в дополнительных списках те элементы, индекс которых соответствует выбранному элементу в основном списке.
3. В вышеуказанном примере совпадающих значений нет, но в реальном проекте они существуют, посему надо всё-таки ориентироваться именно на значения.
И последнее - вы уверены, что при выборе пункта "Все", не должно ничего происходить? Может быть надо и остальные списки возвращать в исходную позицию? Предположу, что ответ ваш будет: "Угу".
Теперь по пунктам моих предположений. Пример номер раз: сравниваем текстовое описание элементов списка

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var mainList = $('#73'),
    supList = $('select[name^=option]'),
    cSel = false;
mainList.on('change', function(){
    cSel = $(':selected',this);
    if(cSel.val() == '') {
        supList.prop('selectedIndex', 0);
    } else {
        $('option:contains(' + cSel.text() + ')',supList).prop('selected', true);
    }
});

Пример номер два-с. Выбираем по индексу элемента в основном списке:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var mainList = $('#73'),
    supList = $('select[name^=option]'),
    cSel = false;
mainList.on('change', function(){
    cSel = $(':selected',this);
    if(cSel.val() == '') {
        supList.prop('selectedIndex', 0);
    } else {
        supList.prop('selectedIndex', cSel.index());
    }
});

Ну, и третий вариант под вопросом, т.к. не уверен, что списки будут содержать одинаковые значения, а даже если какая-то часть и будет совпадать, то возникает вопрос: "А что делать с теми списками, если значения у них не нашлось? Обнулять, оставлять как есть и т.д.".

@Faust971 · 11.05.2014, 14:16

JavaScript
1
2
3
4
5
6
7
$('#73').on('change', function(){
if($(this).find('option:selected').attr('selected')=='selected'){return false;}
sel_op=$(this).val();
$('#55').each(function(){
    $(this).find("[value="+sel_op+"]").attr("selected","selected");
    });
});

На элементе по умолчанию 1 списка должен быть атрибут selected. Устанавливает по атрибуту value а не по текстовому содержимому, так правильнее. и У вас 2 элемента с одинаковым идентификатором 55.

@vovandr · 11.05.2014, 14:19

$('#55').each

@Faust971 · 11.05.2014, 14:41

Сообщение от vovandr

$('#55').each

Забыл удалить это, когда пробовал другую вещь не обращайте внимание

JavaScript
1
$('#55').find("[value="+sel_op+"]").attr("selected","selected");

@Lazy_Den · 11.05.2014, 14:45

Не по теме:

vovandr, :D Всегда думаю, что уж это должны знать все, как "Отче наш". А нет, тема вечна...

@deltaman · 11.05.2014, 23:40 **[ТС]**

Спасибо всем кто откликнулся, сегодня попробовал прикрутить это на сайт. Обнаружились нюансы:
Вызов функции по change делать нельзя, мешаются уже имеющиеся скрипты, которые используя ajax, без перезагрузки страницы формируют на странице список селектов(select[name^=option]), исходя из выбора в селекте #73.
То есть, выбирая в селекте #73 - 90х190, мы формируем некий список селектов (у которых в наборе обязательно есть 90х190) которые подгружаются на страницу. Но кроме 90х190 у подгружаемых селектов есть еще другие значения, у одних больше у других меньше и порядок расположения описаний непредсказуем, синхронизировать выбор по порядку нельзя.
<option value="" >-</option> в селекты добавлять тоже нельзя, мешает другому функционалу, просто если на #73 установлено: <option value="">Все</option> , то нужно просто ничего не делать.

В связи с этим, есть предположение, что функцию нужно запускать после того как ajax подгрузит все селекты, потом просто смотрим что стоит в #73, то и устанавливаем.
Второй вариант, прикрепить функцию к каждому селекту, так как php код у них общий, чтобы она срабатывала непосредственно при формировании его и глядя на то, что стоит в #73, выбирала бы такое же "описание".

Понравился этот вариант, как эго переделать под мои особенности?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var mainList = $('#73'),
    supList = $('select[name^=option]'),
    cSel = false;
mainList.on('change', function(){
    cSel = $(':selected',this);
    if(cSel.val() == '') {
        supList.prop('selectedIndex', 0);
    } else {
        $('option:contains(' + cSel.text() + ')',supList).prop('selected', true);
    }
});

@Lazy_Den · 12.05.2014, 00:28

Сообщение от deltaman

Вызов функции по change делать нельзя

Можно. И вот вам реальный пример. Используйте флаги для переключения между необходимыми действиями.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var mainList = $('#73'),
    supList = $('select[name^=option]'),
    output = $('#output'),
    cSel = false,
    isAjax = true;
mainList.on('change', function(){
    if(isAjax){
        $.ajax({
            url: '/echo/html/',
            type: 'POST',
            dataType: 'html',
            data: {someKey: someVal},
            beforeSend: function(){
                output.text('Ждите ответа!');
            },
            success: function(data){
                output.html(data);
                isAjax = !isAjax;
            }            
        });
    } else {
        cSel = $(':selected',this);
        $('option:contains(' + cSel.text() + ')',output).prop('selected', true);
    }
});

@deltaman · 12.05.2014, 09:25 **[ТС]**

Вот никак не догоняю, как сделать не по change, а по состоянию "страница загружена"
наверное: window.onload = function() {
но как тогда передать функции данные о состоянии #73 ?
они у меня что-то теряются:

JavaScript
1
2
3
4
5
6
7
8
var mainList = $('#73'),
    supList = $('select[name^=option]'),
    output = $('#output'),
    cSel = false;
window.onload = function(){
        cSel = $(':selected',this);
        $('option:contains(' + cSel.text() + ')',output).prop('selected', true);
}

Добавлено через 8 часов 9 минут
Почему вот так не срабатывает?

JavaScript
1
2
3
4
5
6
7
8
9
window.onload = function () {
       var $selects = $('select').not('#73');
           var sell_id = $('#73').val(),
               text = $("option[value='" + sell_id + "']", this).text();
           $selects.each(function (indx, element) {
               var val = $("option:contains('" + text + "')", element).val();
               val && $(element).val(val)
           });
       }

или добавляем кнопку, чтобы по кнопке запускать: <input type="button" value="super" onclick="super100" class="button">

JavaScript
1
2
3
4
5
6
7
8
9
function super100() {
       var $selects = $('select').not('#73');
           var sell_id = $('#73').val(),
               text = $("option[value='" + sell_id + "']", this).text();
           $selects.each(function (indx, element) {
               var val = $("option:contains('" + text + "')", element).val();
               val && $(element).val(val)
           });
       }

но тоже не срабатывает, помогите пожалуйста, что я упускаю?

@Faust971 · 12.05.2014, 23:59

Сообщение от deltaman

Вот никак не догоняю, как сделать не по change, а по состоянию "страница загружена"

Плагин позволяет повесить обработчик события после изменения в узле DOM. То есть помогает отловить изменение при обновлении страницы ajax в определенном узле.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
;(function (factory) {
    if (typeof exports == 'object') {
        factory(require('jquery'));
    } else if (typeof define == 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(jQuery);
    }
}(function ($) {
    'use strict';
    /**
     * Triggers the DOM changed event on the given element
     *
     * @private
     * @param   {Object}    element     the jQuery element that has been modified
     * @param   {String}    type        jQuery method used to trigger manipulation
     */
    function jQueryDOMChanged (element, type) {
        return $(element).trigger('DOMChanged', type);
    }
    /**
     * Wraps a given jQuery method and injects another function to be called
     *
     * @private
     * @param   {String}    method
     * @param   {Function}  caller
     */
    function jQueryHook (method, caller) {
        var definition = $.fn[method];
        if (definition) {
            $.fn[method] = function () {
                var args   = Array.prototype.slice.apply(arguments);
                var result = definition.apply(this, args);
                caller.apply(this, args);
                return result;
            };
        }
    }
    jQueryHook('prepend', function () {
        return jQueryDOMChanged(this, 'prepend');
    });
    jQueryHook('append', function () {
        return jQueryDOMChanged(this, 'append');
    });
    jQueryHook('before', function () {
        return jQueryDOMChanged($(this).parent(), 'before');
    });
    jQueryHook('after', function () {
        return jQueryDOMChanged($(this).parent(), 'after');
    });
    jQueryHook('html', function (value) {
        // Internally jQuery will set strings using innerHTML
        // otherwise will use append to insert new elements
        // Only trigger on string types to avoid doubled events
        if (typeof value === 'string') {
            return jQueryDOMChanged(this, 'html');
        }
    });
}));

Вызывается обработчик как только ajax полностью вернул новый список на селект c сервера:

JavaScript
1
2
3
4
5
$('селектор вашего селекта').on('DOMChanged', function (event) {
    
    $(event.target).children("option").each(function(index, element){
    alert($(this).html());
    });

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Lazy_Den
	11.05.2014, 14:45
	Не по теме: vovandr, :D Всегда думаю, что уж это должны знать все, как "Отче наш". А нет, тема вечна... 0