Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.03.2015, 21:20
Интересующийся
Отправить личное сообщение для chelkaz Посмотреть профиль Найти все сообщения от chelkaz
 
Регистрация: 02.01.2014
Сообщений: 26

зависимые UL LI вместо select (Застрял)
Добрый день! Переделал готовый скрипт зависимых селектов где использовались value о style для связи под атрибут data-id.
Вся работает как нужно. Но потребовалось переделать так, что бы связать списки из ul и li.

Прошу помощи... Пока вот что сделал, как дальше не могу понять...
(как переделать оставшиеся селекты и оптинсы под ul li)

Смысл сделать зависимые выпадающие ul li (Здесь как пример я убрал все флюшки для стилизации выпадения)

Как доделать скрипт под ul li, а не select option...???

<ul id="one">
   <li data-id="fg_0">
       <label for="test1">Значение</label>
   </li>
   <li data-id="fg_1">
       <label for="test2">Значение</label>
   </li>
   <li data-id="fg_2">
       <label for="test3">Значение</label>
   </li>
</ul>

<ul id="two">
   <li data-id="fg_0">
       <label for="test4">Значение</label>
   </li>
   <li data-id="fg_1">
       <label for="test5">Значение</label>
   </li>
   <li data-id="fg_2">
       <label for="test6">Значение</label>
   </li>
</ul>


/*! Chained 1.0.0 - MIT license - Copyright 2010-2014 Mika Tuupola */
!function (a, b) {
    "use strict";
    a.fn.chained = function (c) {
        return this.each(function () {
            function d() {
                var d = !0, g = a("option:selected", e).val();

                a(e).html(f.html());
                var h = "";
                a(c).each(function () {
                    var c = a("li", this).attr('data-id');
                    c && (h.length > 0 && (h += b.Zepto ? "\\\\" : "\\"), h += c)
                    alert(c);
                });
                var i;
                i = a.isArray(c) ? a(c[0]).first() : a(c).first();
                var j = a("option:selected", i).val();
                a("option", e).each(function () {
                    a(this).is('[data-id='+h+']') && a(this).val() === g ? (a(this).prop("selected", !0), d = !1) : a(this).is('[data-id='+h+']') || a(this).is('[data-id='+j+']') || "" === a(this).val() || a(this).remove()
                }), 1 === a("option", e).size() && "" === a(e).val() ? a(e).prop("disabled", !0) : a(e).prop("disabled", !1), d && a(e).trigger("change")
            }

            var e = this, f = a(e).clone();
            a(c).each(function () {
                a(this).bind("change", function () {
                    d()
                }), a("option:selected", this).length || a("option", this).first().attr("selected", "selected"), d()
            })
        })
    }, a.fn.chainedTo = a.fn.chained, a.fn.chained.defaults = {}
}(window.jQuery || window.Zepto, window, document);


Запускается так
$("#two").chained("#ont");

Как доделать скрипт под ul li, а не select option...
Ответить с цитированием
  #2 (permalink)  
Старый 02.03.2015, 22:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

chelkaz,
информации недостаточно и вероятно надо переделывать не скрипт зависимости селектов, а в ваш скрипт стилизации добавлять необходимую функциональность, если дополнять предложенный скрипт не хватает полноценного макета со всеми скриптами, css и select, может тогда вам кто-то поможет.
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2015, 03:03
Интересующийся
Отправить личное сообщение для chelkaz Посмотреть профиль Найти все сообщения от chelkaz
 
Регистрация: 02.01.2014
Сообщений: 26

Сообщение от рони Посмотреть сообщение
chelkaz,
информации недостаточно и вероятно надо переделывать не скрипт зависимости селектов, а в ваш скрипт стилизации добавлять необходимую функциональность, если дополнять предложенный скрипт не хватает полноценного макета со всеми скриптами, css и select, может тогда вам кто-то поможет.
Тогда так спросить попытаюсь. Каким образом можно связать два выпадающих списка (или меню) из ul li, а не из select.

То есть логично, что если выбрали что то в первом, то во втором появляется выбор только для того, что в первом (так как между ними предполагается связь)
Ответить с цитированием
  #4 (permalink)  
Старый 03.03.2015, 08:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

chelkaz,
выбрали в 1 data-id="fg_0" значит во втором скрыли всё кроме data-id="fg_0" вот и весь алгоритм
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2015, 09:21
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Если показывать/скрывать во втором по выбору в первом, то это же можно сделать проще, только связать не так:

$('#one li').click(function() {
    $('#two').find('li').show().not('#'+$(this).data('id')).hide();
})

<ul id="one">
   <li data-id="fg_0">
       <label for="test1">Значение 1</label>
   </li>
   <li data-id="fg_1">
       <label for="test2">Значение 2</label>
   </li>
   <li data-id="fg_2">
       <label for="test3">Значение 3</label>
   </li>
</ul>

<ul id="two">
   <li id="fg_0">
       <label for="test4">Значение 1</label>
   </li>
   <li id="fg_1">
       <label for="test5">Значение 2</label>
   </li>
   <li id="fg_2">
       <label for="test6">Значение 3</label>
   </li>
</ul>

Последний раз редактировалось laimas, 03.03.2015 в 09:25.
Ответить с цитированием
  #6 (permalink)  
Старый 03.03.2015, 09:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от laimas
not('#'+$(this).data('id')).
???
not('[data-id="'+$(this).data('id')+' "]')
Ответить с цитированием
  #7 (permalink)  
Старый 03.03.2015, 10:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Таким образом не будет выбран при моих связях.

PS. Я не совсем понимаю, что значит вместо select, если к примеру поведение его, может нужно что-то типа этого:

$('#'+$(this).data('id')).prependTo('#two');

и еще чего-то свойственного выпадающему списку, поэтому думаю, что лучше идентификатор.

Последний раз редактировалось laimas, 03.03.2015 в 10:12.
Ответить с цитированием
  #8 (permalink)  
Старый 03.03.2015, 10:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

О том, что у меня атрибут во втором списке иначе прописан. )
Ответить с цитированием
  #9 (permalink)  
Старый 03.03.2015, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

laimas,
id в данном случае лучше не использовать так как в <ul id="two"> обычно нужно выбирать несколько строк
Ответить с цитированием
  #10 (permalink)  
Старый 03.03.2015, 10:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Почему несколько? Речь идет о списке со множественным выбором?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
зависимые списки select zazula Элементы интерфейса 48 13.05.2014 21:42
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
Javascript SELECT - зависимые списки zakbc Events/DOM/Window 3 13.01.2013 00:37
Как сохранить предыдущее значение select? MaxD Общие вопросы Javascript 3 21.07.2011 12:36
Проблема с динамическим формированием select elepsion jQuery 1 31.10.2010 14:31