Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
4 / 4 / 5
Регистрация: 09.08.2012
Сообщений: 225
1

Не работает переход по ссылке option в Jquery Combo Box Plugin

07.01.2017, 06:42. Показов 595. Ответов 2
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте.

Помогите пожалуйста решить проблему.

Взял к себе плагин Jquery Combo Box Plugin хочу сделать так чтобы по клику был переход по URL перепробовал много вариантов не работает и всё переход по ссылке.

HTML5
1
2
3
4
5
6
<select id="ui_element" onchange="location = this.value;">
  <option value="google.ru" selected>Вариант 1</option>
  <option value="yandex.ru">Вариант 2</option>
  <option value="mail.ru">Вариант 3</option>
  <option value="yahoo.com">Вариант 4</option>
</select>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.cb_select{
  width:100px;
  display: inline;
  clear:both;
  bottom: 5px;
  margin-left: 17px;
  position:relative;
  font: 14px "OpenSansLight", sans-serif;
}
.cb_select .cb_selectMain{
  color:#191919;
  background-color:#f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background-repeat:no-repeat;
  background-position:91% 50%;
  cursor:pointer;
  text-align:left;
  height:29px;
  line-height:29px;
  text-indent:14px;
  width:113px;
  position:absolute;
  top:0px;
  left:0px;
  z-index:10;
}
.cb_down{
  background-image:url(../images/icons/arrow_down.png);
}
.cb_up{
  background-image:url(../images/icons/arrow_up.png);
}
.cb_selectWrapper{
  width:115px;
  display:none;
  position:absolute;
  top:0px;
  left:0px;
  z-index:1000;
  min-height:50px;
  background-color:#f5f5f5;
  border-radius: 5px;
  margin:43px 0px 0px 0px;
}
.cb_selectWrapper ul {
  list-style:none;
  padding:0px;
  margin:0px;
  width:100%;
}
.cb_selectWrapper ul li a{
  text-decoration:none;
  cursor:pointer;
  display:block;
  padding:4px 0px;
  text-indent:15px;
  letter-spacing:1px;
  color:#191919;
}
.cb_selectWrapper ul li a:hover{
  background-color:#66cef1;
  color:#fff;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
(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);
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.01.2017, 06:42
Ответы с готовыми решениями:

jQuery, запрет перехода по ссылке, Как запретить переход по ссылке, кликая по img внутри нее же?
есть такая конструкция &lt;a href=&quot;link.php&quot;&gt;&lt;img src='pic.jpg'&gt;&lt;/a&gt; когда нажимаю на картинку то...

List Box. Копирование выделенных строк в Combo Box
Здравствуйте форумчане! Выручайте. Я проболела 2 недели. Пока болела вся группа познакомилась с...

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

Combo box
Посмотрите рисунок, ребята! Обратите внимание на столбик, над которым написано 'IN'. В этих...

2
1931 / 1522 / 703
Регистрация: 17.11.2012
Сообщений: 6,585
07.01.2017, 16:07 2
Цитата Сообщение от belltone Посмотреть сообщение
не работает и всё переход по ссылке.
а нафига для этого плагин?
Javascript
1
2
3
4
                $('#ui_element').change(function(){
                    var url = 'http://'+ $(this).val();
                    $(location).attr('href',url);
                })
не?
0
4 / 4 / 5
Регистрация: 09.08.2012
Сообщений: 225
07.01.2017, 23:39  [ТС] 3
Плагин понадобился для стилизации выпадающего списка, но как потом выяснилось не работает в нём переход по ссылке если без плагина то нормально работает как сделать так чтобы работало с плагином, в коде плагина может что-то надо поменять, не хотелось бы менять на другой из-за этого.
0
07.01.2017, 23:39
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.01.2017, 23:39
Помогаю со студенческими работами здесь

Combo Box
Собственно есть комобокс, его тип: Drop Down List. В нем есть несколько вариантов выбора. На...

Combo box
Очень надо! Есть свич с комбо боксом.... 2 формы... Надо текст выбранного айтема в комбобоксе,...

Не работает переход по ссылке
Не понимаю, почему не работает переход по ссылке. ССылка есть - перехода нет. Вот часть кода ...

Не работает переход по ссылке
Есть форма с кнопкой &lt;button&gt;, у которой по событию onclick выполняется код javascript: ...

Не работает переход по ссылке
Такая проблема: добавил ссылки через тег а &lt;nav class=&quot;nav&quot;&gt; &lt;a...

Не работает переход по ссылке
сделал кнопку в adobe flash CS6 и написал код на переход на ссылку запускаю через сочитание клавишь...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru