зависимые 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...

chelkaz,
информации недостаточно и вероятно надо переделывать не скрипт зависимости селектов, а в ваш скрипт стилизации добавлять необходимую функциональность, если дополнять предложенный скрипт не хватает полноценного макета со всеми скриптами, css и select, может тогда вам кто-то поможет.

Тогда так спросить попытаюсь. Каким образом можно связать два выпадающих списка (или меню) из ul li, а не из select.

То есть логично, что если выбрали что то в первом, то во втором появляется выбор только для того, что в первом (так как между ними предполагается связь)

chelkaz,
выбрали в 1 data-id="fg_0" значит во втором скрыли всё кроме data-id="fg_0" вот и весь алгоритм

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

$('#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>

???
not('[data-id="'+$(this).data('id')+' "]')

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

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

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

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

О том, что у меня атрибут во втором списке иначе прописан. )

laimas,
id в данном случае лучше не использовать так как в <ul id="two"> обычно нужно выбирать несколько строк

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