Select выбор нескольких пунктов
Всем привет!
Кто знает подскажите гайд или плагин какой нить. Задача: Есть селект с списком товара. Необходимо когда юзер выбирает пункт селекта выводить внизу инпут с названием выбранного пункта и затем передовать это значение обработчику. Сам выбранный пункт должен исчезнуть из селекта. А в поле выбора селекта должно появляться надпись: добавить еще товар. Юзер выбирает еще товар и под селектом добавляется еще инпут с выбранным товаром и т. д. Да и хотелось бы, что бы на против выбранных инпутов был крестик - отменить, то есть убрать товар из списка выбранных. После его нажатия товар должен пропасть из списка выбранных и снова появится в селекте. Гуглил, но ничего приемлемого не нашел. Варианты с ctrl мне не нравятся. Варианты с подгрузкой таких же селектов (типа выбор категории и подкатегории) я не вижу как их приспособить бод свою задачу... Вобщем кто сталкивался подскажите пож. куда копать. Думаю, что должна быть какой нить плагин под Jquery, но я не нашел. |
В твоей задаче как я понял селект ничего не отправляет а чисто работает с данными ты можешь при помощи подручных средств типа спан и прочее
сделать select- подобный элемент 1) далее вешаеш обработчик делегированием на общий блок 2) получаешь данные при клике на какой либо пункт 3) при клике снизу создаешь input с параметрами и в него же пишешь выбранные данные из второго пункта. Это как вариант!! есть и другие варианты!! я сам начал недавно изучать так что не пинай ногами!! |
В общем сделал все на http://harvesthq.github.io/chosen/
Получилось почти то, что хотел. Но столкнулся с дурацкой и гадской проблемой с z-index. Выпадающий список из модернизированного JQuery selecta напроч отказывается быть поверх всего остального контента и блоков. position: absolute и z-index:1010; не помогают. Долбусь уже с этой "МЕГА" проблемой целый день.... Подскажите как решить, кто сталкивался с подобным.... Собственно сам select на тестовом сервере http://ddssdd.w.pw/ И еще, сам список select (без преобразований chosen) выпадает по верх всего. Как только подключаю плагин chosen и он преобразует select - все список выпадает за контентом и блоками... |
Урряяя! Заработалао! Блин 1.5 дня, что бы из скрипта убрать position:relative родителю......... ПРЕМИЮ ДАРВИНА В СТУДИЮ! :lol:
/** * Rhinoslider 1.05 * [url]http://rhinoslider.com/[/url] * * Copyright 2012: Sebastian Pontow, Rene Maas ([url]http://renemaas.de/[/url]) * Dual licensed under the MIT or GPL Version 2 licenses. * [url]http://rhinoslider.com/license/[/url] */ (function($,window,undefined){ $.extend($.easing,{ def:'out', out:function(none,currentTime,startValue,endValue,totalTime){ return-endValue*(currentTime/=totalTime)*(currentTime-2)+startValue; }, kick:function(none,currentTime,startValue,endValue,totalTime){ if((currentTime/=totalTime/2)<1){ return endValue/2*Math.pow(2,10*(currentTime-1))+startValue; } return endValue/2*(-Math.pow(2,-10*--currentTime)+2)+startValue; }, shuffle:function(none,currentTime,startValue,endValue,totalTime){ if((currentTime/=totalTime/2)<1){ return endValue/2*currentTime*currentTime*currentTime*currentTime*currentTime+startValue; } return endValue/2*((currentTime-=2)*currentTime*currentTime*currentTime*currentTime+2)+startValue; } }); var rhinoSlider=function(element,opts){ var settings=$.extend({},$.fn.rhinoslider.defaults,opts),$slider=$(element),effects=$.fn.rhinoslider.effects,preparations=$.fn.rhinoslider.preparations,vars={ isPlaying:false, intervalAutoPlay:false, active:'', next:'', container:'', items:'', buttons:[], prefix:'rhino-', playedArray:[], playedCounter:0, original:element }; settings.callBeforeInit(); var setUpSettings=function(settings){ settings.controlsPrevNext=String(settings.controlsPrevNext)=='true'?true:false; settings.controlsKeyboard=String(settings.controlsKeyboard)=='true'?true:false; settings.controlsMousewheel=String(settings.controlsMousewheel)=='true'?true:false; settings.controlsPlayPause=String(settings.controlsPlayPause)=='true'?true:false; settings.pauseOnHover=String(settings.pauseOnHover)=='true'?true:false; settings.animateActive=String(settings.animateActive)=='true'?true:false; settings.autoPlay=String(settings.autoPlay)=='true'?true:false; settings.cycled=String(settings.cycled)=='true'?true:false; settings.showTime=parseInt(settings.showTime,10); settings.effectTime=parseInt(settings.effectTime,10); settings.controlFadeTime=parseInt(settings.controlFadeTime,10); settings.captionsFadeTime=parseInt(settings.captionsFadeTime,10); tmpShiftValue=settings.shiftValue; tmpParts=settings.parts; settings.shiftValue=[]; settings.parts=[]; return settings; },init=function($slider,settings,vars){ settings=setUpSettings(settings); $slider.wrap('<div class="'+vars.prefix+'container">'); vars.container=$slider.parent('.'+vars.prefix+'container'); vars.isPlaying=settings.autoPlay; var buttons=''; if(settings.controlsPrevNext){ vars.container.addClass(vars.prefix+'controls-prev-next'); buttons='<a class="'+vars.prefix+'prev '+vars.prefix+'btn">'+settings.prevText+'</a><a class="' +vars.prefix+'next '+vars.prefix+'btn">'+settings.nextText+'</a>'; vars.container.append(buttons); vars.buttons.prev=vars.container.find('.'+vars.prefix+'prev'); vars.buttons.next=vars.container.find('.'+vars.prefix+'next'); vars.buttons.prev.click(function(){ $(".rhino-next").hide(); $('.form-submit').show(); $('.form-submit').html("Äàëåå"); if(($slider.find('.rhino-active').index()) != 0){ prev($slider,settings); } if($slider.find('.rhino-active').index() == 1){ $(".rhino-prev").hide(); } if(settings.autoPlay){ pause(); } }); vars.buttons.next.click(function(){ $(".rhino-next").hide(); $('.form-submit').show(); $(".rhino-prev").show(); if($slider.find('.rhino-active').index() != ($slider.find('.rhino-item').length -1)){ next($slider,settings); } if($slider.find('.rhino-active').index() == ($slider.find('.rhino-item').length -2)){ $('.form-submit').html("Ðàññ÷èòàòü"); } if(settings.autoPlay){ pause(); } }); } if(settings.controlsPlayPause){ vars.container.addClass(vars.prefix+'controls-play-pause'); buttons=settings.autoPlay?'<a class="'+vars.prefix+'toggle '+vars.prefix+'pause '+vars.prefix+'btn">'+settings.pauseText+'</a>':'<a class="'+vars.prefix+'toggle '+vars.prefix+'play '+vars.prefix+'btn">'+settings.playText+'</a>'; vars.container.append(buttons); vars.buttons.play=vars.container.find('.'+vars.prefix+'toggle'); vars.buttons.play.click(function(){ if(vars.isPlaying===false){ play(); }else{ pause(); } }); } vars.container.find('.'+vars.prefix+'btn').css({ position:'absolute', display:'block', cursor:'pointer' }); if(settings.showControls!=='always'){ var allControls=vars.container.find('.'+vars.prefix+'btn'); allControls.stop(true,true).fadeOut(0); if(settings.showControls==='hover'){ vars.container.mouseenter(function(){ allControls.stop(true,true).fadeIn(settings.controlFadeTime); }).mouseleave(function(){ allControls.delay(200).fadeOut(settings.controlFadeTime); }); } } if(settings.showControls!=='never'){ vars.container.addClass(vars.prefix+'show-controls'); } vars.items=$slider.children(); vars.items.addClass(vars.prefix+'item'); vars.items.first().addClass(vars.prefix+'active'); var sliderStyles=settings.styles.split(','),style; $.each(sliderStyles,function(i,cssAttribute){ style=$.trim(cssAttribute); vars.container.css(style,$slider.css(style)); $slider.css(style,' '); switch(style){ case'width':case'height': $slider.css(style,'100%'); break; } }); if(vars.container.css('position')=='static'){ vars.container.css('position','relative'); } И ВОТ ЭТА ГАДОСТЬ!!! $slider.css({ top:'auto', left:'auto', position:'relative' }); |
Теперь все выглядит так http://ddssdd.w.pw/page.html
Здесь как всегда что "помогли" выбрать - куда копать, что "подсказали" решение возникшей проблемы... Все сам... Жалко только 1.5 дней на это решение... "Спасибо" любимому форуму :-? |
Часовой пояс GMT +3, время: 01:00. |