Здрасти всем, суть такая:
На сайте
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
В чем может быть причина?
