динамические списки
 

Здрасти всем, суть такая:
На сайте http://plugins.jquery.com есть плагин динамичских селектов
(http://plugins.jquery.com/project/De...SelectbySilVeR)..
Я решил на основе примера, и не влезая во внутреннсти плагина, написать что-то подобное (дабы потренировать себя в jquery и javascript)

В примере:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.dependent.js"></script>

<script type="text/javascript">
jQuery(function($){				
	$('#selectme2').dependent({ parent:'selectme', group: 'selectable' });
	$('#selectme3').dependent({ parent:'selectme2', group: 'selectable' });	
});
</script>

<select name="selectme" id="selectme" class="selectable">
	<option value="">-- select --</option>
	<option value="1" title="flowers"  >Flowers</option>
    <option value="2" title="animals"  >Animals</option>
</select>

<select name="selectme2" id="selectme2" class="selectable">
	<option value="">-- select --</option>
	<option value="1" class="flowers" title="sunflower"  >Sunflower</option>
    <option value="2" class="flowers" title="rose" 		 >Rose</option>
    <option value="3" class="animals" title="dog"		 >Dog</option>
    <option value="4" class="animals" title="cat"		 >Cat</option>
</select>

<select name="selectme3" id="selectme3" class="selectable">
    <option value="">-- select --</option>
    <option value="1" class="sunflower">Sunflower type 1</option>
    <option value="2" class="sunflower">Sunflower type 2</option>
    <option value="3" class="sunflower">Sunflower type 3</option>
    <option value="4" class="rose">Rose type 1</option>
    <option value="5" class="rose">Rose type 2</option>
    <option value="6" class="rose">Rose type 3</option>
    <option value="7" class="dog">Dog type 1</option>
    <option value="8" class="dog">Dog type 2</option>
    <option value="9" class="dog">Dog type 3</option>
    <option value="10" class="cat">Cat type 1</option>
    <option value="11" class="cat">Cat type 2</option>
    <option value="12" class="cat">Cat type 3</option>
</select>

Я его чуть переработал, и написал свой маленький плагин:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.depend_1.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('#selectme2').depend({ parent:'selectme'});
	$('#selectme3').depend({ parent:'selectme2'});
});
</script>

<select name="selectme" id="selectme" class="selectable clasamea">
    <option value="">-- select --</option>
    <option value="1" title="flowers">Flowers</option>
    <option value="2" title="animals">Animals</option>
</select>

<select name="selectme2" id="selectme2" class="selectable">
    <option value="">-- select --</option>
    <option value="1" class="flowers" title="sunflower">Sunflower</option>
    <option value="2" class="flowers" title="rose">Rose</option>
    <option value="3" class="animals" title="dog">Dog</option>
    <option value="4" class="animals" title="cat">Cat</option>
</select>

<select name="selectme3" id="selectme3" class="selectable">
    <option value="">-- select --</option>
    <option value="1" class="sunflower">Sunflower type 1</option>
    <option value="2" class="sunflower">Sunflower type 2</option>
    <option value="3" class="sunflower">Sunflower type 3</option>
    <option value="4" class="rose">Rose type 1</option>
    <option value="5" class="rose">Rose type 2</option>
    <option value="6" class="rose">Rose type 3</option>
    <option value="7" class="dog">Dog type 1</option>
    <option value="8" class="dog">Dog type 2</option>
    <option value="9" class="dog">Dog type 3</option>
    <option value="10" class="cat">Cat type 1</option>
    <option value="11" class="cat">Cat type 2</option>
    <option value="12" class="cat">Cat type 3</option>
</select>

все тоже, только строчку чуть сократил:
<script type="text/javascript">
jQuery(function($){
$('#selectme2').depend({ parent:'selectme'});
$('#selectme3').depend({ parent:'selectme2'});
});
</script>

А это плагин jquery.depend_1.js:

(function($) {
$.fn.depend = function(options) {
this.find('option').hide();
this.find('option:first').show();
var current = this;
$('#' + options.parent).find('option:first').each(function(){
     $(this).click(function(){
        current.find('option:not(:first)').hide();
        current.find('option:first').attr({selected:'selected'});
        current.find('option:first').click();
     })
})
 $('#' + options.parent).find('option:not(:first)').each(function(){
    var cur = $(this);
    $(this).click(function(){
        current.find('option:not(:first)').hide();
        var text = cur.text().toLowerCase();
        current.find('option' + '.' + text).show();
        current.find('option:first').attr({selected:'selected'});
        current.find('option:first').click();
    })
 })
}
})(jQuery);

Он не работает в IE из-за того, что в эксплорере незя скрыть option,
можно скрыть только весь select (и в Опере тоже не пашет, в чем там причина - не знаю), но в FF работает.

Вообщем,решил я его попробовать переделать так, чтобы он под IE заработал, и вместо скрытия отдельных option,
попробовал создавать скрытые копии каждого select,
и по необходимости кидать из них нужные option в исходные select (из которых предварительно выкинуты все option кроме первого)

(function($) {
$.fn.depend = function(options) {
    var child = this.clone().attr('id',(this.attr('id') + 'hid')).hide();//для потомка создаем скрытые копии, из которых потом будем вынимать ( и засовывать обратно) options
    this.after(child);//прикрепляем невидимку после каждого 'двойника'    
    this.find('option:not(:first)').remove();//удаляем из потомка все option кроме первого
if(!($('*').is('#' + $('#' + options.parent).attr('id') + 'hid'))) {//если у родителя нет скрытого поля => это первый родитель (исходный), добавляем обработчики событий для него
//для его option
var current = this;//в переменной - потомок-замыкание
$('#' + options.parent).find('option:first').each(function(){//при щелчке на первом option родителя (в данном случае первого родителя)
     $(this).click(function(){//при щелчке
        child.append(current.find('option:not(:first)'));//к клону потомка прикрепляем всё, что было в элементе потомке
        current.find('option:first').click();
     })
})//при щелчке на других option
$('#' + options.parent).find('option:not(:first)').each(function(){
    var cur = $(this);//текущий option-closure (замыкание)
    $(this).click(function(){
        child.append(current.find('option:not(:first)'));//выкидываем из потомка все option, кроме первого в потомок-клон
        var text = cur.text().toLowerCase();//текст option, по которому щелкнули        
        current.append(child.find('option' + '.' + text));
        current.find('option:first').click();
    })
})
}
else {
var current = this;//в переменной - потомок-замыкание
$('#' + options.parent).find('option:first').each(function(){//при щелчке на первом option родителя (в данном случае первого родителя)
     $(this).click(function(){//при щелчке
        child.append(current.find('option:not(:first)'));//к клону потомка прикрепляем всё, что было в элементе потомке
        current.find('option:first').click();
     })
})//при щелчке на других option
$('#' + options.parent + 'hid').find('option:not(:first)').each(function(){
    var cur = $(this);//текущий option-closure (замыкание)
    $(this).click(function(){
        child.append(current.find('option:not(:first)'));//выкидываем из потомка все option, кроме первого в потомок-клон
        var text = cur.text().toLowerCase();//текст option, по которому щелкнули
        current.append(child.find('option' + '.' + text));
        current.find('option:first').click();
    })
})
}
}
})(jQuery);

Но почему-то опять в IE не работает, только в FF
В чем может быть причина?