JS - Customising html select control using javascript

Question

How can I make a select element with multiple options, similar to the Select Element, have a more button-like appearance, such as the Button Element?

Can JavaScript be used to create custom button-like functionality for selecting options?

It's worth noting that the first element mentioned is automatically generated by Prestashop and is a part of the product features.

Answer 1

EDIT: I don't know Prestashop, but if you can edit or implement JS into the code this probably can help.

If you really want to change the select element this will help you. I will suggest to do it differently but it's your choice.

HTML (notice i disabled the select so the user will not be able to change):

<div class="wrapper">
<div id="minusBtn">-</div>
<select id="mySelect" disabled>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
  <option value="5">option5</option>
</select>
<div id="plusBtn">+</div>
</div>

CSS:

.wrapper{
  display:flex;
}
select{
   -webkit-appearance: none;
  
}
/*style the disabled select*/
select[disabled] {
  border:1px solid black !important;
  opacity:1;
  color:black;
  width:60px;
  height:20px;
  
}
#plusBtn, #minusBtn{
  cursor:pointer;
    height:20px;
  text-align:center;
  width:15px;
  border:1px solid black;
}

JS:

var count = 1

document.getElementById('plusBtn').addEventListener('click', function(){
  //first check if count is less than the max options length
  if(count < document.getElementById("mySelect").options.length){
    //increase count by 1
    count++
    //changing the select option to count
    document.getElementById('mySelect').value = count
  
    } else{
      //if count is more than the options length we want to give the last option
      document.getElementById('mySelect').value = 5
    }
 })

document.getElementById('minusBtn').addEventListener('click', function(){
  if(count > 1){
    count--
  document.getElementById('mySelect').value = count
  
    } else{
      document.getElementById('mySelect').value = 1
    }
 })

of course, the user can inspect the page with developer tools and change the HTML to be able to select. In this case, you must to have back-end validation.

codepen : https://codepen.io/Elnatan/pen/RwabNBv

---

I EDITED the JS code according to Mad SQL answer. So because now we will use selectedIndex, the count should equal to 0 instead of 1 because the index starts from 0. and I compare the selected index to the length of the options if it's on maximum so now it should work even if you will add or remove options from the select.

So now it should look like this: (i didn't add the getProductAttribute())

var count = 0
var selectLength = document.getElementById("mySelect").options.length

document.getElementById('plusBtn').addEventListener('click', function(){
    //increase count by 1
    count++
  //check if count is less than the max options length
  if(count < document.getElementById("mySelect").options.length){
    
    //changing the select option to count
    document.getElementById('mySelect').selectedIndex  = count
  
    } else{
      //if count is more than the options length we want to give the last option
      count = selectLength
      document.getElementById('mySelect').selectedIndex = selectLength -1
    }
 })

document.getElementById('minusBtn').addEventListener('click', function(){
    count--
  if(count > 0){
    
  document.getElementById('mySelect').selectedIndex = count
  
    } else{
    count = 0
      document.getElementById('mySelect').selectedIndex = 0
    }
 })