Selector drop down is not working

amazezones
Explorer
82 0 13

Hello

 

Below code is not working. Once I click on the dropdown box is should shows list of values which is from A-Z but its not showing. could anyone help.

 

 

 

 

<div class="selector">
<div class="selector_wrapper">
<div id="selectField_1" class="selectField">
<p id="selectText_1" class="selectText" value="">Select 1st Digit (Starting from left)</p>
</div>
<!--<label for="first-box h6">The first box (beginning of the left panel) <span>*</span></label>-->
</div>
<ul id="options_wrapper_1" class="list hide options_wrapper">
<li class="options">
<span value="">Select 1st Digit (Starting from left)</span>
</li>

<li class="options">
<span value="A">A</span>
</li>
<li class="options">
<span value="B">B</span>
</li>
<li class="options">
<span value="C">C</span>
</li>
<li class="options">
<span value="D">D</span>
</li>
<li class="options">
<span value="E">E</span>
</li>
<li class="options">
<span value="F">F</span>
</li>
<li class="options">
<span value="G">G</span>
</li>
<li class="options">
<span value="H">H</span>
</li>
<li class="options">
<span value="I">I</span>
</li>
<li class="options">
<span value="J">J</span>
</li>
<li class="options">
<span value="K">K</span>
</li>
<li class="options">
<span value="L">L</span>
</li>
<li class="options">
<span value="M">M</span>
</li>
<li class="options">
<span value="N">N</span>
</li>
<li class="options">
<span value="O">O</span>
</li>
<li class="options">
<span value="P">P</span>
</li>
<li class="options">
<span value="Q">Q</span>
</li>
<li class="options">
<span value="R">R</span>
</li>
<li class="options">
<span value="S">S</span>
</li>
<li class="options">
<span value="T">T</span>
</li>
<li class="options">
<span value="U">U</span>
</li>
<li class="options">
<span value="V">V</span>
</li>
<li class="options">
<span value="W">W</span>
</li>
<li class="options">
<span value="X">X</span>
</li>
<li class="options">
<span value="Y">Y</span>
</li>
<li class="options">
<span value="Z">Z</span>
</li>
<li class="options">
<span value="0">0</span>
</li>
<li class="options">
<span value="1">1</span>
</li>
<li class="options">
<span value="2">2</span>
</li>
<li class="options">
<span value="3">3</span>
</li>
<li class="options">
<span value="4">4</span>
</li>
<li class="options">
<span value="5">5</span>
</li>
<li class="options">
<span value="6">6</span>
</li>
<li class="options">
<span value="7">7</span>
</li>
<li class="options">
<span value="8">8</span>
</li>
<li class="options">
<span value="9">9</span>
</li>
</ul>
</div>

 

Reply 1 (1)

Liqiud_xPert_SJ
Shopify Partner
418 45 63

Hi @amazezones welcome to the Shopify Community,

 

The code is written in the un order list and list tags by default the select field use <select> tag and <option> tags inside the select box. if you want to take the same code you can use custom css to show list items as dropdown. 

Let me know if you need unorder list code as dropdown.

 

li {
 display: block;
 transition-duration: 0.5s;
}

li:hover {
  cursor: pointer;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

Thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂