Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2014, 11:16
Аспирант
Отправить личное сообщение для DDSSDD Посмотреть профиль Найти все сообщения от DDSSDD
 
Регистрация: 06.04.2011
Сообщений: 53

Select выбор нескольких пунктов
Всем привет!
Кто знает подскажите гайд или плагин какой нить.

Задача:
Есть селект с списком товара. Необходимо когда юзер выбирает пункт селекта выводить внизу инпут с названием выбранного пункта и затем передовать это значение обработчику.
Сам выбранный пункт должен исчезнуть из селекта. А в поле выбора селекта должно появляться надпись: добавить еще товар.
Юзер выбирает еще товар и под селектом добавляется еще инпут с выбранным товаром и т. д.

Да и хотелось бы, что бы на против выбранных инпутов был крестик - отменить, то есть убрать товар из списка выбранных. После его нажатия товар должен пропасть из списка выбранных и снова появится в селекте.

Гуглил, но ничего приемлемого не нашел. Варианты с ctrl мне не нравятся. Варианты с подгрузкой таких же селектов (типа выбор категории и подкатегории) я не вижу как их приспособить бод свою задачу...

Вобщем кто сталкивался подскажите пож. куда копать. Думаю, что должна быть какой нить плагин под Jquery, но я не нашел.
Ответить с цитированием
  #2 (permalink)  
Старый 06.09.2014, 10:23
Аспирант
Отправить личное сообщение для nesfiraty Посмотреть профиль Найти все сообщения от nesfiraty
 
Регистрация: 15.07.2014
Сообщений: 30

В твоей задаче как я понял селект ничего не отправляет а чисто работает с данными ты можешь при помощи подручных средств типа спан и прочее
сделать select- подобный элемент
1) далее вешаеш обработчик делегированием на общий блок
2) получаешь данные при клике на какой либо пункт
3) при клике снизу создаешь input с параметрами и в него же пишешь выбранные данные из второго пункта.

Это как вариант!! есть и другие варианты!! я сам начал недавно изучать так что не пинай ногами!!
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2014, 13:51
Аспирант
Отправить личное сообщение для DDSSDD Посмотреть профиль Найти все сообщения от DDSSDD
 
Регистрация: 06.04.2011
Сообщений: 53

В общем сделал все на http://harvesthq.github.io/chosen/
Получилось почти то, что хотел.

Но столкнулся с дурацкой и гадской проблемой с z-index.
Выпадающий список из модернизированного JQuery selecta напроч отказывается быть поверх всего остального контента и блоков.

position: absolute и z-index:1010; не помогают.
Долбусь уже с этой "МЕГА" проблемой целый день....

Подскажите как решить, кто сталкивался с подобным....
Собственно сам select на тестовом сервере http://ddssdd.w.pw/

И еще, сам список select (без преобразований chosen) выпадает по верх всего. Как только подключаю плагин chosen и он преобразует select - все список выпадает за контентом и блоками...
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2014, 17:03
Аспирант
Отправить личное сообщение для DDSSDD Посмотреть профиль Найти все сообщения от DDSSDD
 
Регистрация: 06.04.2011
Сообщений: 53

Урряяя! Заработалао! Блин 1.5 дня, что бы из скрипта убрать position:relative родителю......... ПРЕМИЮ ДАРВИНА В СТУДИЮ!

/**
  * 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'
            });
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2014, 17:18
Аспирант
Отправить личное сообщение для DDSSDD Посмотреть профиль Найти все сообщения от DDSSDD
 
Регистрация: 06.04.2011
Сообщений: 53

Теперь все выглядит так http://ddssdd.w.pw/page.html

Здесь как всегда что "помогли" выбрать - куда копать, что "подсказали" решение возникшей проблемы... Все сам... Жалко только 1.5 дней на это решение... "Спасибо" любимому форуму
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Select, optionl, и автоматический выбор Rorbi Элементы интерфейса 2 29.05.2014 15:38
Имитировать выбор в списке select cha0s jQuery 1 27.03.2014 19:43
сэмулировать выбор первого элемента select evgeniy123 jQuery 2 05.02.2014 02:37
выбор в select Александр141 Элементы интерфейса 4 03.11.2012 13:53
Выбор всех Select kvaleksandr Элементы интерфейса 12 27.10.2012 20:55