1

http://www.scribbletribe.com/tutorials/styling-the-select/demo-2.html

Вот значит есть список, естественно, стилизировал я уже его под себя. Работает все замечательно и, что хорошо - в старых браузерах тоже. Но есть одно но - никак не могу сделать два списка в передах одной формы с разным содержимым. Т.е.:

<form action="#">
    <select class="turnintodropdown" id="1" name="1">
        <option>11111111111111</option>
        <option>11111111111111</option>
        <option>11111111111111</option>
        <option>11111111111111</option>
        <option>11111111111111</option>
    </select>  
    <select class="turnintodropdown" id="2" name="2">
        <option>22222222222222</option>
        <option>22222222222222</option>
        <option>22222222222222</option>
        <option>22222222222222</option>
        <option>22222222222222</option>
    </select> 
 </form>

function tamingselect()
{
	if(!document.getElementById && !document.createTextNode){return;}

// Classes for the link and the visible dropdown
	var ts_selectclass='turnintodropdown'; 	// class to identify selects
	var ts_listclass='turnintoselect';		// class to identify ULs
	var ts_boxclass='dropcontainer'; 		// parent element
	var ts_triggeron='activetrigger'; 		// class for the active trigger link
	var ts_triggeroff='trigger';			// class for the inactive trigger link
	var ts_dropdownclosed='dropdownhidden'; // closed dropdown
	var ts_dropdownopen='dropdownvisible';	// open dropdown
/*
	Turn all selects into DOM dropdowns
*/
	var count=0;
	var toreplace=new Array();
	var sels=document.getElementsByTagName('select');
	for(var i=0;i<sels.length;i++){
		if (ts_check(sels[i],ts_selectclass))
		{
			var hiddenfield=document.createElement('input');
			hiddenfield.name=sels[i].name;
			hiddenfield.type='hidden';
			hiddenfield.id=sels[i].id;
			hiddenfield.value=sels[i].options[0].value;
			sels[i].parentNode.insertBefore(hiddenfield,sels[i])
			var trigger=document.createElement('a');
			ts_addclass(trigger,ts_triggeroff);
			trigger.href='#';
			trigger.onclick=function(){
				ts_swapclass(this,ts_triggeroff,ts_triggeron)
				ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
				return false;
			}
			trigger.appendChild(document.createTextNode(sels[i].options[0].text));
			sels[i].parentNode.insertBefore(trigger,sels[i]);
			var replaceUL=document.createElement('ul');
			for(var j=0;j<sels[i].getElementsByTagName('option').length;j++)
			{
				var newli=document.createElement('li');
				var newa=document.createElement('a');
				newli.v=sels[i].getElementsByTagName('option')[j].value;
				newli.elm=hiddenfield;
				newli.istrigger=trigger;
				newa.href='#';
				newa.appendChild(document.createTextNode(
				sels[i].getElementsByTagName('option')[j].text));
				newli.onclick=function(){
					this.elm.value=this.v;
					ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
					ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
					this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
					return false;
				}
				newli.appendChild(newa);
				replaceUL.appendChild(newli);
			}
			ts_addclass(replaceUL,ts_dropdownclosed);
			var div=document.createElement('div');
			div.appendChild(replaceUL);
			ts_addclass(div,ts_boxclass);
			sels[i].parentNode.insertBefore(div,sels[i])
			toreplace[count]=sels[i];
			count++;
		}
	}

/*
	Turn all ULs with the class defined above into dropdown navigations
*/

	var uls=document.getElementsByTagName('ul');
	for(var i=0;i<uls.length;i++)
	{
		if(ts_check(uls[i],ts_listclass))
		{
			var newform=document.createElement('form');
			var newselect=document.createElement('select');
			for(j=0;j<uls[i].getElementsByTagName('a').length;j++)
			{
				var newopt=document.createElement('option');
				newopt.value=uls[i].getElementsByTagName('a')[j].href;
				newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML));
				newselect.appendChild(newopt);
			}
			newselect.onchange=function()
			{
				window.location=this.options[this.selectedIndex].value;
			}
			newform.appendChild(newselect);
			uls[i].parentNode.insertBefore(newform,uls[i]);
			toreplace[count]=uls[i];
			count++;
		}
	}
	for(i=0;i<count;i++){
		toreplace[i].parentNode.removeChild(toreplace[i]);
	}
	function ts_check(o,c)
	{
	 	return new RegExp('\\b'+c+'\\b').test(o.className);
	}
	function ts_swapclass(o,c1,c2)
	{
		var cn=o.className
		o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
	}
	function ts_addclass(o,c)
	{
		if(!ts_check(o,c)){o.className+=o.className==''?c:' '+c;}
	}
}

window.onload=function()
{
	tamingselect();
	// add more functions if necessary
}

Второй список стилизируется но не работает вообще. В чем проблема? (Вопрос про javascript часть, с css разобраться в моих силах)

6
  • так class разные сделайте и уже к разным классам разыне стили приписывайте.
    – cyadvert
    24 окт 2015 в 20:07
  • проблема не в стилях, а в javascript, он их не воспринимает, как только нажимаешь на один из блоков открывается лишь только первый список, второй при этом не активен
    – drewkrit
    24 окт 2015 в 20:08
  • вообще-то у них там два списка на разных страницах, а не два списка на одной. Если Вы переключаетесь между списками - URL меняется. Поэтому у них и стили разные.
    – cyadvert
    24 окт 2015 в 20:13
  • Я, видимо, не совсем доступно пояснил, за что прошу прощения. При помещении двух списков на одной странице, работает лишь один из них. Собственно, проблема в этом и заключается
    – drewkrit
    24 окт 2015 в 20:15
  • т.е. второй даже не выпадает? или при нажатии на второй выпадает первый?
    – cyadvert
    24 окт 2015 в 20:21

2 ответа 2

1

Проблема в том, что ищется только первый выпадающий список ul.

ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);

Вот измененный вариант, где каждому созданному элементу навешивается уникальный id.

var replaceUL = document.createElement('ul');
replaceUL.id = "ul-"+sels[i].id;

В дальнейшем, при нажатии из атрибута ссылки берется id списка, к которому принадлежит ссылка, поиск элемента производится по этому id.

trigger.onclick=function(){
  ts_swapclass(this,ts_triggeroff,ts_triggeron)
  /// Поиск
  ts_swapclass(document.getElementById( (this.hash).split('#')[1] ),ts_dropdownclosed,ts_dropdownopen);
  /// Поиск
  return false;
}

function tamingselect() {
  if (!document.getElementById && !document.createTextNode) {
    return;
  }

  // Classes for the link and the visible dropdown
  var ts_selectclass = 'turnintodropdown'; // class to identify selects
  var ts_listclass = 'turnintoselect'; // class to identify ULs
  var ts_boxclass = 'dropcontainer'; // parent element
  var ts_triggeron = 'activetrigger'; // class for the active trigger link
  var ts_triggeroff = 'trigger'; // class for the inactive trigger link
  var ts_dropdownclosed = 'dropdownhidden'; // closed dropdown
  var ts_dropdownopen = 'dropdownvisible'; // open dropdown
  /*
  	Turn all selects into DOM dropdowns
  */
  var count = 0;
  var toreplace = new Array();
  var sels = document.getElementsByTagName('select');
  for (var i = 0; i < sels.length; i++) {
    if (ts_check(sels[i], ts_selectclass)) {
      var hiddenfield = document.createElement('input');
      hiddenfield.name = sels[i].name;
      hiddenfield.type = 'hidden';
      hiddenfield.id = sels[i].id;
      hiddenfield.value = sels[i].options[0].value;
      sels[i].parentNode.insertBefore(hiddenfield, sels[i])
      var trigger = document.createElement('a');
      ts_addclass(trigger, ts_triggeroff);
      trigger.href = '#ul-' + sels[i].id;
      trigger.onclick = function() {
        ts_swapclass(this, ts_triggeroff, ts_triggeron)
        ts_swapclass(document.getElementById((this.hash).split('#')[1]), ts_dropdownclosed, ts_dropdownopen);
        return false;
      }
      trigger.appendChild(document.createTextNode(sels[i].options[0].text));
      sels[i].parentNode.insertBefore(trigger, sels[i]);
      var replaceUL = document.createElement('ul');
      replaceUL.id = "ul-" + sels[i].id;
      for (var j = 0; j < sels[i].getElementsByTagName('option').length; j++) {
        var newli = document.createElement('li');
        var newa = document.createElement('a');
        newli.v = sels[i].getElementsByTagName('option')[j].value;
        newli.elm = hiddenfield;
        newli.istrigger = trigger;
        newa.href = '#';
        newa.appendChild(document.createTextNode(
          sels[i].getElementsByTagName('option')[j].text));
        newli.onclick = function() {
          this.elm.value = this.v;
          ts_swapclass(this.istrigger, ts_triggeron, ts_triggeroff);
          ts_swapclass(this.parentNode, ts_dropdownopen, ts_dropdownclosed)
          this.istrigger.firstChild.nodeValue = this.firstChild.firstChild.nodeValue;
          return false;
        }
        newli.appendChild(newa);
        replaceUL.appendChild(newli);
      }
      ts_addclass(replaceUL, ts_dropdownclosed);
      var div = document.createElement('div');
      div.appendChild(replaceUL);
      ts_addclass(div, ts_boxclass);
      sels[i].parentNode.insertBefore(div, sels[i])
      toreplace[count] = sels[i];
      count++;
    }
  }

  /*
  	Turn all ULs with the class defined above into dropdown navigations
  */

  var uls = document.getElementsByTagName('ul');
  for (var i = 0; i < uls.length; i++) {
    if (ts_check(uls[i], ts_listclass)) {
      var newform = document.createElement('form');
      var newselect = document.createElement('select');
      for (j = 0; j < uls[i].getElementsByTagName('a').length; j++) {
        var newopt = document.createElement('option');
        newopt.value = uls[i].getElementsByTagName('a')[j].href;
        newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML));
        newselect.appendChild(newopt);
      }
      newselect.onchange = function() {
        window.location = this.options[this.selectedIndex].value;
      }
      newform.appendChild(newselect);
      uls[i].parentNode.insertBefore(newform, uls[i]);
      toreplace[count] = uls[i];
      count++;
    }
  }
  for (i = 0; i < count; i++) {
    toreplace[i].parentNode.removeChild(toreplace[i]);
  }

  function ts_check(o, c) {
    return new RegExp('\\b' + c + '\\b').test(o.className);
  }

  function ts_swapclass(o, c1, c2) {
    var cn = o.className
    o.className = !ts_check(o, c1) ? cn.replace(c2, c1) : cn.replace(c1, c2);
  }

  function ts_addclass(o, c) {
    if (!ts_check(o, c)) {
      o.className += o.className == '' ? c : ' ' + c;
    }
  }
}

//window.onload=function()
//{
tamingselect();

// add more functions if necessary
//}
<!--////////////////////////////////////////
////           Demo #1              ////
////////////////////////////////////////
--> .dropcontainer {
  position: relative;
  font-size: 16px;
  color: #777;
}
.trigger {
  color: #777;
  padding: 10px;
  font-size: 16px;
  width: 50%;
  background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
  display: block;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.trigger:hover {
  color: #777;
  background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
.activetrigger {
  color: #777;
  padding: 10px;
  font-size: 16px;
  width: 50%;
  background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
  display: block;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.activetrigger:hover {
  background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
  color: #777;
}
.activetrigger:active {
  background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
  color: #777;
}
.dropcontainer ul {
  font-size: 16px;
  border: 1px solid #ccc;
  border-top: none;
  background: #fff;
  list-style-type: none;
  padding: 10px;
  margin: 0;
  width: 50%;
  z-index: 100;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.dropcontainer ul li {
  padding: 5px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.dropcontainer ul li:hover {
  background: #f5f5f5;
  outline: none;
}
.dropcontainer ul li:first-child {
  display: none;
}
.dropcontainer ul li:last-child {
  border-bottom: none;
}
.dropdownhidden {
  display: none;
}
.dropdownvisible {
  height: auto;
}
<!--////////////////////////////////////////
////           Demo #2              ////
////////////////////////////////////////
--> .dropcontainer_demo2 {
  position: relative;
  font-size: 16px;
  color: #777;
}
.trigger_demo2 {
  color: #777;
  padding: 10px;
  font-size: 16px;
  width: 50%;
  background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
  display: block;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.trigger_demo2:hover {
  color: #777;
  background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
.activetrigger_demo2 {
  color: #777;
  padding: 10px;
  font-size: 16px;
  width: 50%;
  background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
  display: block;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.activetrigger_demo2:hover {
  background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
  color: #777;
}
.activetrigger_demo2:active {
  background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
  color: #777;
}
.dropcontainer_demo2 ul {
  font-size: 16px;
  border: 1px solid #ccc;
  border-top: none;
  background: #fff;
  list-style-type: none;
  padding: 10px;
  margin: 0;
  width: 50%;
  z-index: 100;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.dropcontainer_demo2 ul li {
  padding: 5px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.dropcontainer_demo2 ul li:hover {
  background: #f5f5f5;
  outline: none;
}
.dropcontainer_demo2 ul li:first-child {
  display: none;
}
.dropcontainer_demo2 ul li:last-child {
  border-bottom: none;
}
.dropdownhidden_demo2 {
  display: none;
}
.dropdownvisible_demo2 {
  height: auto;
}
.dropdownvisible_demo2 {
  height: 200px;
  overflow-y: scroll;
}
<form action="#">
  <select class="turnintodropdown" id="1" name="1">
    <option>11111111111111</option>
    <option>11111111111111</option>
    <option>11111111111111</option>
    <option>11111111111111</option>
    <option>11111111111111</option>
  </select>
  <select class="turnintodropdown" id="2" name="2">
    <option>22222222222222</option>
    <option>22222222222222</option>
    <option>22222222222222</option>
    <option>22222222222222</option>
    <option>22222222222222</option>
  </select>
</form>

5
  • Объясните тупому человеку как это все должно вместе смотреться и куда его вставлять, пожалуйста) тупой, каюсь
    – drewkrit
    24 окт 2015 в 21:11
  • @drewkrit Просто замените всю функцию tamingselect() 24 окт 2015 в 21:13
  • не могу понять, у меня по какой то причине не форматируются они вообще и выглядят дефолтно, вам не трудно на фидл залить?
    – drewkrit
    24 окт 2015 в 21:21
  • на кодпин codepen.io/Vitaliiy/pen/epMJgZ 24 окт 2015 в 21:24
  • Работает, спасибо!
    – drewkrit
    24 окт 2015 в 21:30
0

Плагин, который Вы нашли, не применение различных стилей, но с одним JS функционалом.

Если вы сравните JS (http://www.scribbletribe.com/tutorials/styling-the-select/js/select.js) и тот же путь но select_demo2.js, Вы увидите, что они отличаются только первыми строчками - где классы прописаны.

В Вашем случае несколько вариантов.

  1. искать другой плагин, чтобы поддерживал несколько разностилевых списков на странице
  2. исправить их код: сделать самому на их основе
  3. самый грязный вариант - запускать их код для разных классов столько раз, сколько у вас стилизованных списков...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.