JS - Настройка html выберите элемент управления, используя javascript - PullRequest
Новая
       8

JS - Настройка html выберите элемент управления, используя javascript

0 голосов
/ 02 августа 2020

Как я могу настроить элемент выбора с несколькими параметрами, такими как Элемент выбора до Элемент кнопки ? Можно ли использовать JS для реализации кнопок, которые будут служить средством выбора опций?

Первый элемент создается Prestashop и его частью функций продукта.

1 Ответ

0 голосов
/ 03 августа 2020

EDIT: я не знаю Prestashop, но если вы можете отредактировать или внедрить JS в код, это, вероятно, может помочь.

Если вы действительно хотите изменить элемент выбора, это поможет вам. Я предлагаю сделать это по-другому, но это ваш выбор.

HTML (обратите внимание, я отключил выбор, поэтому пользователь не сможет его изменить): 

<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
    }
 })

Конечно, пользователь может проверить страницу с помощью инструментов разработчика и изменить HTML, чтобы иметь возможность выбирать. В этом случае у вас должна быть внутренняя проверка.

код: https://codepen.io/Elnatan/pen/RwabNBv

Я ИЗМЕНИЛ код JS в соответствии с ответом Mad SQL. Итак, поскольку теперь мы будем использовать selectedIndex, счетчик должен быть равен 0 вместо 1, потому что индекс начинается с 0. Я сравниваю выбранный индекс с длиной опций, если он на максимум, поэтому теперь он должен работать, даже если вы добавите или удалите параметры из выбора.

Теперь это должно выглядеть так: (я не добавлял 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
    }
 })
...