зависимые 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, может тогда вам кто-то поможет. |
Цитата:
То есть логично, что если выбрали что то в первом, то во втором появляется выбор только для того, что в первом (так как между ними предполагается связь) |
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"> обычно нужно выбирать несколько строк |
Почему несколько? Речь идет о списке со множественным выбором?
|
Цитата:
|
Может быть и так.
|
:write: если в первом селекторе 3 строки то во втором должно быть минимум 6 иначе зачем оно -- мысли вслух :)
|
Ну это может быть как пример и неудачный, а на самом деле опция первого списка может быть связана со вторым списком имеющим от 1 до N опций. То есть как это бы действительно связанные списки, когда по выбору в первом получаем второй. А что хотят заменить в этом случае, я лично не понял. )
|
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li.select label{
background: #FF9933;
}
li label{
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$('#one li').click(function() {
$('#one li').removeClass('select');
$(this).addClass('select');
$('#two').find('li').show().not('[data-id="'+$(this).data('id')+'"]').hide();
}).eq(0).click()
});
</script>
</head>
<body>
<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 data-id="fg_0">
<label for="test4">Значение 1.1</label>
</li>
<li data-id="fg_0">
<label for="test4">Значение 1.2</label>
</li>
<li data-id="fg_1">
<label for="test5">Значение 2.1</label>
</li>
<li data-id="fg_1">
<label for="test5">Значение 2.2</label>
</li>
<li data-id="fg_2">
<label for="test6">Значение 3.1</label>
</li>
<li data-id="fg_2">
<label for="test6">Значение 3.2</label>
</li>
</ul>
</body>
</html>
|
То есть во второй список упаковано N-списков?
|
laimas,
как вариант -- но лучше в обьекте хранить дерево и показывать веточки по запросу ))) http://javascript.ru/forum/dom-windo...tml#post231937 |
Ну так этот вариант ну никак не вяжется с заменить SELECT на UL - нет такого элемента в html. )
|
laimas,
тс уже заменил всё что ему надо -- у него проблема связи ul и в 17 посте работа с обьектом показана а не замена если вы про этот пост. |
| Часовой пояс GMT +3, время: 04:34. |