Return to previous page

Double drop list problem - by Niek - on WordPress WooCommerce support

This topic has 5 replies, 2 voices, and was last updated 10 years, 1 months ago ago by Eva Kemp

Niek

Participant

October 16, 2014 at 07:11

Dear makers of the leader theme,

We made a website with your great theme and we would like to offer our customers a easy use of our website. Therefore we are designing a extra search option on our home page, which users can use to find their product. However, everything is working, but untill now i was not able to change the design of it. I made this: http://www.autoschluessel-online.de/test/

The code for this is here:

<!-- The first select list -->
<h5>Ihr Automarke:<h5><select name="slist1" class="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="Alfa">Alfa Romeo</option>
 <option value="Aprilia">Aprilia</option>
 <option value="Audi">Audi</option>
 <option value="BWM">BMW</option>
 <option value="Buick">Buick</option>
 <option value="Cadillac">Cadillac</option>
 <option value="Chrysler">Chrysler</option>
 <option value="Citroen">Citroën</option>
 <option value="Daewoo">Deawoo</option>
 <option value="Ductai">Ductai</option>
 <option value="Eagle Vision">Eagle Vision</option>
 <option value="Fiat">Fiat</option>
 <option value="Ford">Ford</option>
 <option value="Holden">Holden</option>
 <option value="Honda">Honda</option>
 <option value="HondaM">Honda Montorrad</option>
 <option value="Hyundai">Hyundai</option>
 <option value="Inviniti">Inviniti</option>
 <option value="Isuzu">Isuzu</option>
 <option value="Iveco">Iveco</option>
 <option value="Jaguar">Jaguar</option>
 <option value="Jeep">Jeep</option>
 <option value="Kawasaki">Kawasaki</option>
 <option value="Kia">Kia</option>
 <option value="Lancia">Lancia</option>
 <option value="Land">Land Rover</option>
 <option value="Lexus">Lexus</option>
 <option value="Mazda">Mazda</option>
 <option value="MercedusB">Mercedus Benz</option>
 <option value="MercedusT">Mercedus Trucks</option>
 <option value="Mitsubishi">Mitsubishi</option>
 <option value="Nissan">Nissan</option>
 <option value="Peugeot">Peugeot</option>
 <option value="Renault">Renault</option>
 <option value="RenaultD">Renault Dacia</option>
 <option value="Rover">Rover</option>
 <option value="Saab">Saab</option>
  <option value="Scania">Scania</option>
 <option value="Seat">Seat</option>
 <option value="Skoda">Skoda</option>
 <option value="Subaru">Subaru</option>
 <option value="Suzuki">Suzuki</option>
 <option value="Toyota">Toyota</option>
 <option value="VW">VW</option>
 <option value="Volvo">Volvo</option>
 <option value="MercedusT">Mercedus Trucks</option>
</select>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>

<script><!--
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object();             // JS object that stores data for options

// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = '<h5>Ihr Modell:<h5>';

/*
 Property with options for the Seccond select list
 The key in this object must be the same with the values of the options added in the first select
 The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
 "Alfa": ['145', '146', '155','156', '156 Sportwagen', '164', '166', 'Spider','Gulietta', 'Mito'],
 "coursesweb": ['php-mysql', 'javascript', 'flash-as3']
};

/*
 Property with text-content associated with the options of the 2nd select list
 The key in this object must be the same with the values (options) added in each Array in "slist2" above
 The values of each key represent the content displayed after the user selects an option in 2nd dropdown list

*/
SList.scontent = {
 "145": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/145/">Jetzt suche</button> ',
  "146": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/146/">CJetzt suche</button> ',
   "145": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/155/">Jetzt suche</button> ',

};

    /* From here no need to modify */

// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';           // empty option-content

  if(SList[slist][option]) {
    // if option from the last Select, add text-content, else, set dropdown list
    if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
    else if(slist == 'slist2') {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }

      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
    }
  }
  else if(slist == 'slist2') {
    // empty the tag for 2nd select list
    document.getElementById('slist2').innerHTML = '';
  }
}
--></script>

Is it possible to use a CSS code or something to change the design? We want them to be full width (from the left to the right of the page)?

#20056 Copied

4 Answers

Eva Kemp

Support staff

October 16, 2014 at 15:08

Hello,

Do you wish the drop down list to be full width?
If so please add this code in custom.css file:

.slist1 {
    width: 1000px !important;
}

Thank you.
Regards,
Eva Kemp.

#20150 Copied

Niek

Participant

October 17, 2014 at 07:27

Hello Eva,

This worked, but i do not have the desired results. It is possible to adjust to class in a responsive class, that it will adjust the width of the box untill to max. possible screen width. Now it is on my computer not full width (only 3/4) and on my hand it is really large.

It would be perfect if this one could be made responsive to the max. width of the screen.

Thnx for your work!!

#20255 Copied

Niek

Participant

October 17, 2014 at 14:01

Ok got the solution. It had to be: