В настоящее время я создаю плагин, который позволяет мне изменять поля выбора на что-то симпатичное, я делаю это, изменяя поля выбора, которые находятся на странице, в списки определений, с описанием определения, которое я вкладываюul в нем, а li - значения из списка выбора.
У меня, однако, проблема, если, например, у меня есть 3 поля выбора на странице, я получаю странную ошибку и не могу точно определить, гдев моем коде я ошибаюсь, но что означает, что несколько dd добавляются к каждому dl, поэтому, например, второй dl имеет 2 dd, где, как и должно быть, должно быть, как в 3-м окне выбора1 dd но у него 3, кажется, что количество созданных dd соответствует индексу цикла.Как я могу сделать так, чтобы только один dd, создавался для dl, и чтобы были добавлены правильные опции.
Это мой код плагина,
/***********
* Select-Me create pretty select lists using a <ul> inplace of the <select>
* Author: Simon Ainley (on behalf of The Factory Agency)
* Version: 0.0.1
***********/
(function($){
$.fn.selectMe = function(options) {
var defaults = {
select_text : null,
remove_first_value : false,
speed : 1000
}
var options = $.extend(defaults, options);
return this.each(function(index) {
//get an instance of the object we are working with
var obj = $(this);
var obj_name = obj.attr('name');
console.log(obj_name);
obj.closest('form').append('<input type="hidden" class="dropdown_value" value="" name="'+obj_name+'"/>');
var options = $("option", obj);
var replacement_list_heading = "<dl class='dropdown "+obj_name+"'><dt><span>"+defaults.select_text+"</span><a href=''>Go</a></dt></dl>";
obj.closest('form').prepend(replacement_list_heading);
var values_start = "<dd class='shadow_50'><ul></ul></dd>";
$(".dropdown").append(values_start);
if(defaults.remove_first_value == true) {
options.splice(0, 1);
}
options.each(function(index){
$(".dropdown." + obj_name + " dd ul").append(
'<li><a href="#"><span class="option">' +
$(this).text() + '</span><span class="value">' +
$(this).val() + '</span></a></li>'
);
});
obj.remove();
$('.dropdown li a').hover(function() {
$(this).parent('li').addClass('hover');
}, function() {
$(this).parent('li').removeClass('hover');
});
$(".dropdown dt a").click(function(e) {
$(this).closest("dl").find("dd").slideToggle(defaults.speed);
e.preventDefault();
});
$(".dropdown ul a").click(function(e) {
var value = $(this).find('span').text();
$(this).addClass('selected');
$(".dropdown_value").val(value);
$(".dropdown dt span").text($('.selected .option').text());
$(".dropdown dd").slideUp(defaults.speed);
$(this).removeClass('selected');
e.preventDefault();
});
});
};
})(jQuery);
Я считаю, что проблемы в этихразделы кода,
var options = $("option", obj); - я думаю, мне нужно различать каждый набор опций?
options.each(function(index){
$(".dropdown." + obj_name + " dd ul").append(
'<li><a href="#"><span class="option">' +
$(this).text() + '</span><span class="value">' +
$(this).val() + '</span></a></li>'
);
});
Я считаю, что этот бит просто зацикливается независимо от того, должен ли он останавливаться идобавьте параметры в новый dd?
любая помощь будет отличной!
Как я вызываю свой плагин,
$(".type select").selectMe({
select_text : "I'm looking for...",
remove_first_value : true,
});
$(".skill select").selectMe({
select_text : "Skill",
remove_first_value : true,
});
$(".gender select").selectMe({
select_text : "Gender",
remove_first_value : true,
});
и HTML, который изменяется,
div class="grid_4">
<fieldset>
<div class="formRow drop_down">
<select name="type">
<option value="0" selected="selected">I'm looking for...</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
</select>
</div>
</fieldset>
</div>
<div class="grid_4">
<fieldset>
<div class="formRow drop_down">
<select name="skill">
<option value="0" selected="selected">Skill</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
<option value="4">dancers</option>
<option value="5">accents</option>
<option value="6">film</option>
<option value="7">tv</option>
</select>
</div>
</fieldset>
</div>
<div class="grid_4">
<fieldset>
<div class="formRow drop_down">
<select name="gender">
<option value="0" selected="selected">Gender</option>
<option value="1">male</option>
<option value="2">female</option>
</select>
</div>
</fieldset>
</div>