Изменить значение href в зависимости от выбранной опции

Question

Я пытаюсь перестроить процесс оформления заказа для моего простого магазина и не могу понять, как изменить значение href="" в зависимости от выбранной опции.

Мой код:

<div class="nice-select" tabindex="0">
    <div class="list">
        <div class="scrollbar">
            <div class="list_item option focus" data-value="10">
                250 items <span class="price" data-count="250" data-price="10">$10</span></div>
            <div class="list_item option" data-value="25">
                500 items <span class="price" data-count="500" data-price="25">$25</span></div>
            <div class="list_item option" data-value="40">
            1000 items <span class="price" data-count="1000" data-price="40">$40</span>
            </div>
        </div>
    </div>
</div>


<a href="" class="btn btn-info">Buy Now</a>

Просто хотел сделать что-то подобное, если выбран параметр с data-value="10 ", href будет:

website.com/?add-to-cart=356&variation_id=15723

, если выбран data-value="25", href будет /?add-to-cart=356&variation_id=15725 et c

Я не эксперт по JavaScript, поэтому буду признателен за любую помощь.

Answer 1

Хорошо, поэтому я решил воспользоваться некоторыми возможностями моего решения, поскольку не смог воспроизвести функциональность ваших пользовательских элементов выбора.

CodePen

Упрощенный HTML :

• не то же самое HTML, но вы можете использовать свое и связанное с ним событие change вместо того, что было сделано здесь.

<select>
  <option value="250"> 250 items -> $10</option>
  <option value="500"> 500 items -> $25</option>
  <option value="1000"> 1000 items -> $40</option>
</select>
<a href="htpps://website.com/?add-to-cart=356&variation_id=15723" class="btn btn-info">Buy Now</a>

JAVASCRIPT:

// cache all the elements
var buyNowButton = document.querySelector("a");
var selectElement = document.querySelector("select");
var selectOptionElements = selectElement.querySelectorAll("option");
// create a map for the select to href value
var urlMap = {
  "250": 15723,
  "500": 15724,
  "1000": 15725
};

// listen to changes of the select
selectElement.addEventListener("change", function (evt) {
  // replace the "search" value of the anchor href
  // use regex to find the current variation_id value and replace it using
  // selectedIndex and the urlMap and update it.
  buyNowButton.search = buyNowButton.search.replace(
    /variation\_id\=[0-9]+/,
    "variation_id=" +
      urlMap[selectOptionElements[selectElement.selectedIndex].value]
  );
});

selectedIndex
anchor.search

Answer 2

Очень просто, вы можете найти альтернативу: En Javascript:

var elements = document.getElementsByClassName('list_item');
for(var i = 0; i < elements.length; i++){
    elements[i].addEventListener('click', function(){
        document.getElementById('buynow').setAttribute('href', 'www.example.com?product=' + this.getAttribute('data-value'));
    });
}

En jQuery:

$('div.list_item option[data-value]').clicl(function(){
    $('a.btn').attr('href', 'www.example.com?product=' + $(this).data('data-value'));
});

США. USAs.

Answer 3

document.querySelector("btn .btn-info").href="/?add-to-cart=356&variation_id=15725"; Вы можете использовать onChange для Select, и в зависимости от значения вы можете установить href