Нашел для решения своей задачи готовый пример, но не пойму как сделать одну штуку там, ибо в JQUERY не силен вообще (специализируюсь больше на PHP).
В общем есть файлик jquery.scrollablecombo.js, в котором ВСЁ и происходит.
В файле index.html что-то типа такого:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>UI Elements: jQuery Combo Box Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="UI Elements: jQuery Combo Box Plugin" />
<meta name="keywords" content="jquery, plugin, combo box, select"/>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.scrollablecombo.js"></script>
<script type="text/javascript">
$(function() {
$('#ui_element').scrollablecombo();
});
</script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<body>
<select id="ui_element">
<option value="A" selected>Option Item A</option>
<option value="B">Option Item B</option>
<option value="C">Option Item C</option>
<option value="D">Option Item D</option>
<option value="E">Option Item E</option>
<option value="F">Option Item F</option>
<option value="G">Option Item G</option>
<option value="H">Option Item H</option>
<option value="I">Option Item I</option>
<option value="J">Option Item J</option>
</select>
</body>
</html>
А вот если я вешаю на Селект обработчик onChange, тюе вот так будет:
<select id="ui_element" onchange="alert(this.value);" >
то ничего не происходит)) А я хочу, чтобы при выборе того или иного пункта выпадающего списка, у меня вылетало окошко с выбранным значением (т.е с value).
Вот как такое можно реализовать?
Повторюсь, что с Jquery не умею работать, потому и обратился к вам за помощью!
P.S. выкладывать ли сюда содержимое файла jquery.scrollablecombo.js ?Он не большой )
Спустя 43 минуты (15.12.2011 - 23:12) Игорь_Vasinsky написал(а):
а дебаггер что говорит???
Спустя 19 минут, 29 секунд (15.12.2011 - 23:31) Гость_Алексей написал(а):
Дебаггером не пользуюсь)
Попробовал дописать там тег <form method='post' action='file.php'>, кнопку Сабмит добавил, так вот в ПХП, через этот метод пост, вообще ничего не приходит...ни значения, ничего.....просто пустота....
Попробовал дописать там тег <form method='post' action='file.php'>, кнопку Сабмит добавил, так вот в ПХП, через этот метод пост, вообще ничего не приходит...ни значения, ничего.....просто пустота....
Спустя 12 минут, 47 секунд (15.12.2011 - 23:44) Игорь_Vasinsky написал(а):
Цитата |
Дебаггером не пользуюсь) |
это как ловить чёрную кошку в тёмной комноте.
установи GoogleChrome
открой свой сайт - нажми F12 - консоль - все ошибки JS - будут там.
Спустя 1 минута, 43 секунды (15.12.2011 - 23:46) killer8080 написал(а):
Цитата (Гость_Алексей @ 15.12.2011 - 21:29) |
А вот если я вешаю на Селект обработчик onChange, тюе вот так будет: <select id="ui_element" onchange="alert(this.value);" > то ничего не происходит)) |
Возможно этот плагин вообще удаляет селект из документа, и подменяет его на dhtml?
Спустя 21 час, 33 минуты, 23 секунды (16.12.2011 - 21:19) Гость_Алексей написал(а):
killer8080, верно!)
Там всё это заменяется на ul и li, поэтому onChange и не работает...
Вот содержимое файла jquery.scrollablecombo.js
Что посоветуете в таком случае?
Там всё это заменяется на ul и li, поэтому onChange и не работает...
Вот содержимое файла jquery.scrollablecombo.js
(function($) {
$.fn.scrollablecombo = function(options) {
var opts = $.extend({}, $.fn.scrollablecombo.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
function findHighestZIndex(){
var divs = document.getElementsByTagName('div');
var highest = 0;
for (var i = 0; i < divs .length; i++)
{
var zindex = divs[i].style.zIndex;
if (zindex > highest) {
highest = zindex;
}
}
return highest;
}
/**
* hide the select element
* graceful degradation
*/
$this.hide();
function makeScrollable($wrapper, $container){
var extra = 50;
var wrapperHeight = $wrapper.height() ;
$wrapper.css({overflow: 'hidden'});
$wrapper.scrollTop(0);
$wrapper.unbind('mousemove').bind('mousemove',function(e){
var ulHeight = $container.outerHeight() + 2*extra ;
var top = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
$wrapper.scrollTop(top);
});
}
/**
* let's build our element structure
*/
var $ul_e = $('<ul />');
$this.find('option').each(function(){
var $option = $(this);
var liclass = '';
if($option.attr('selected'))
liclass = 'selected';
var $li_e = $('<li />',{
className : liclass,
html : '<a href="'+$option.val()+'">'+$option.html()+'</a>'
});
$ul_e.append($li_e);
});
var $wrapper_e = $('<div />',{
className : 'cb_selectWrapper'
});
$wrapper_e.append($ul_e);
var $control_e = $('<div />',{
//id : 'ui_element',
className : 'cb_selectMain cb_down'
});
var $select_e = $('<div />',{
className : 'cb_select'
});
$select_e.append($wrapper_e).append($control_e);
var $selected = $ul_e.find('.selected');
function openCombo(){
var maxzidx = Math.max(findHighestZIndex(),99999);
$wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
$control_e.addClass('cb_up').removeClass('cb_down');
makeScrollable($wrapper_e,$ul_e);
}
function closeCombo(){
$wrapper_e.css('z-index',1000).hide();
$control_e.addClass('cb_down').removeClass('cb_up');
}
$control_e.html($selected.find('a').html())
.bind('click',function(){
(!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
}
);
$selected.hide();
$this.parent().append($select_e);
$this.remove();
$ul_e.find('a').bind('click',function(e){
var $this = $(this);
$control_e.html($this.html());
var $selected = $ul_e.find('.selected');
$selected.show().removeClass('selected');
$this.parent().addClass('selected').hide();
closeCombo();
e.preventDefault();
});
});
};
$.fn.scrollablecombo.defaults = {
};
})(jQuery);
Что посоветуете в таком случае?
Спустя 7 минут, 25 секунд (16.12.2011 - 21:27) Гость_Алексей написал(а):
Просто задача у меня такая:
У меня есть как бы 2 списка выбора, причём второй строится на основе того, какой выбран первый. Ну т.е есть, например, 2 селекта, один это ПРОИЗВОДИТЕЛЬ МОНИТОРОВ, а второй это МОДЕЛЬ МОНИТОРА. Выбирая в первом, например, самсунг, он мне строит второй список моделей, относящихся к самсунгу....итд....
Так вот это всё работает так, что на первом селекте стоит onchange, т.е как только выбрал производителя - автоматически строится список моделей.
Все данные хранятся в базе данных. Если просто работать с 2-мя селектами - всё работает норм, проблема у меня в другом была, потому я и стал мучаться с такой вот реализацией Я её тут расписал, но её потом перекинули в тему ДИЗАЙН И ВЕРСТКА, вот она (http://phpforum.ru/index.php?showtopic=54981)
У меня есть как бы 2 списка выбора, причём второй строится на основе того, какой выбран первый. Ну т.е есть, например, 2 селекта, один это ПРОИЗВОДИТЕЛЬ МОНИТОРОВ, а второй это МОДЕЛЬ МОНИТОРА. Выбирая в первом, например, самсунг, он мне строит второй список моделей, относящихся к самсунгу....итд....
Так вот это всё работает так, что на первом селекте стоит onchange, т.е как только выбрал производителя - автоматически строится список моделей.
Все данные хранятся в базе данных. Если просто работать с 2-мя селектами - всё работает норм, проблема у меня в другом была, потому я и стал мучаться с такой вот реализацией Я её тут расписал, но её потом перекинули в тему ДИЗАЙН И ВЕРСТКА, вот она (http://phpforum.ru/index.php?showtopic=54981)
Спустя 21 час, 24 минуты, 17 секунд (17.12.2011 - 18:51) killer8080 написал(а):
Гость_Алексей
Фуфловый плагин. Селект он удаляет, а скрытый инпут не добавляет. Естественно на сервер ничего передаваться не будет. События селекта так же игнорируются, он тупо удаляется. Управление с клавиатуры не предусмотрено в принципе. Я бы 10 раз подумал прежде чем его использовать. Под твою задачу его нужно изрядно допиливать напильником.
Фуфловый плагин. Селект он удаляет, а скрытый инпут не добавляет. Естественно на сервер ничего передаваться не будет. События селекта так же игнорируются, он тупо удаляется. Управление с клавиатуры не предусмотрено в принципе. Я бы 10 раз подумал прежде чем его использовать. Под твою задачу его нужно изрядно допиливать напильником.
Спустя 2 часа, 45 минут, 14 секунд (17.12.2011 - 21:36) Гость_Алексей написал(а):
Мда...
killer8080, а что бы ты посоветовал для реализации такой вот задачи, про которую я написал?
killer8080, а что бы ты посоветовал для реализации такой вот задачи, про которую я написал?
Спустя 17 часов, 43 минуты, 7 секунд (18.12.2011 - 15:19) killer8080 написал(а):
Гость_Алексей
вообще подмена стандартных контролов, не есть гуд. Могут возникнуть разные проблемы с кроссбраузерностью. Подумайте действительно ли оно нужно. Но если уж приспичило поищи более подходящий плагин, например здесь, может быть найдешь то что нужно.
вообще подмена стандартных контролов, не есть гуд. Могут возникнуть разные проблемы с кроссбраузерностью. Подумайте действительно ли оно нужно. Но если уж приспичило поищи более подходящий плагин, например здесь, может быть найдешь то что нужно.
Спустя 6 часов, 44 минуты, 27 секунд (18.12.2011 - 22:04) Гость_Алексей написал(а):
killer8080, ОГРОМНОЕ ТЕБЕ СПАСИБО за предоставленную ссылку!
Нашел относительно неё скрипт подходящий, правда помучался там с настройками "под меня", но всё же она РАБОТАЕТ )))
Еще раз БОЛЬШОЕ СПАСИБО!
Нашел относительно неё скрипт подходящий, правда помучался там с настройками "под меня", но всё же она РАБОТАЕТ )))
Еще раз БОЛЬШОЕ СПАСИБО!