将option的值解析为html属性

Question

我目前正在尝试制作一个使用selly.io的电子商务网站。 但是我最近陷入了尝试根据他们想要购买的产品大小来更改产品ID（用来告诉selly.io用户在购买什么）的信息。

这是我正在谈论的代码的一部分：

<div class="col-md-6 col-lg-5 p-b-30">
    <div class="p-r-50 p-t-5 p-lr-0-lg">
    <h4 class="mtext-105 cl2 js-name-detail p-b-14">
        Hoodie
    </h4>

    <span class="mtext-106 cl2">
        €50,00
</span>
    <p class="stext-102 cl3 p-t-23">Nulla eget sem vitae eros pharetra viverra. Nam vitae luctus ligula. Mauris consequat ornare feugiat.
    </p>

    <div class="p-t-33">
        <div class="flex-w flex-r-m p-b-10">
            <div class="size-203 flex-c-m respon6">
                Size
            </div>
            <div class="size-204 respon6-next">
                <div class="rs1-select2 bor8 bg0">
                <select class="js-select2" name="time">
                    <option>Choose an option</option>
                    <option>Size S</option>
                    <option>Size M</option>
                    <option>Size L</option>
                    <option>Size XL</option>
                </select>
                <div class="dropDownSelect2"></div>
            </div>
        </div>
    </div>
    <div class="flex-w flex-r-m p-b-10">
        <div class="size-203 flex-c-m respon6">
            Color
        </div>
        <div class="size-204 respon6-next">
            <div class="rs1-select2 bor8 bg0">
                <select class="js-select2" name="time">
                    <option>Choose an option</option>
                    <option>Blue</option>
                    <option>White</option>
                    <option>Grey</option>
                </select>
                <div class="dropDownSelect2"></div>
            </div>
        </div>
    </div>

    <div class="flex-w flex-r-m p-b-10">
        <div class="size-204 flex-w flex-m respon6-next">
            <div class="wrap-num-product flex-w m-r-20 m-tb-10">
                <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m">
                </div>

                <input class="mtext-104 cl3 txt-center num-product" type="number" name="num-product" value="1">
                <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m">
                </div>
            </div>

            <button data-selly-product="3cffe13b" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">Add to cart</button>
        </div>
    </div>  
</div>

我正在尝试更改此ID：

<button data-selly-product="3cffe13b"

根据用户在此处选择的内容：

<select class="js-select2" name="time">
    <option>Choose an option</option>
    <option>Size S</option>
    <option>Size M</option>
    <option>Size L</option>
    <option>Size XL</option>
</select>

我试过将选择的选项解析为一个名为value的javascript变量：

<div class="size-204 respon6-next">
    <div class="rs1-select2 bor8 bg0">
        <script type="text/javascript">
            function getComboA(selectObject) {
                var value = selectObject.value;  
            }
        </script>
        <select class="js-select2" name="time" id="comboA"onchange="getComboA(this)">
            <option value="">Choose an option</option>
            <option value="3cffe13b">Size S</option>
            <option value="M">Size M</option>
            <option value="L">Size L</option>
            <option value="XL">Size XL</option>
        </select>
        <div class="dropDownSelect2"></div>
    </div>
</div>

然后将该值存储在cookie中：

<script type="text/javascript">
    $(document).ready(function () {
        createCookie("value", value, "1");
    });

    function createCookie(name, value, days) {
        var expires;
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }
        document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
    }
</script>

然后使该值在数据独立产品中回显：

<button data-selly-product="<?php if(isset($_COOKIE["value"])) echo $_COOKIE["value"]; ?>" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">Add to cart</button>

Answer 1

要只设置button的data-selly-product属性，您必须使用.dataset属性 。 从链接引用：

JavaScript中的自定义数据属性的名称是相同的HTML属性的名称，但是在camelCase中，没有破折号，点等。

 function getComboA(selectObject) { const button = document.querySelector('button.js-addcart-detail'); button.dataset.sellyProduct = selectObject.value; console.log(button); } 

 <select class="js-select2" name="time" id="comboA" onchange="getComboA(this)"> <option value="">Choose an option</option> <option value="3cffe13b">Size S</option> <option value="M">Size M</option> <option value="L">Size L</option> <option value="XL">Size XL</option> </select> <button class="flex-cm stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">Add to cart</button> 

建议不要使用onchange属性，而onchange移动到单独的文件中，而应使用侦听器。 这使您可以更好地将逻辑与表示分离，并且可以将多个侦听器添加到同一元素。 您只需对代码进行一些小的调整：

document.getElementById('comboA').addEventListener('change', function() {
  const button = document.querySelector('button.js-addcart-detail');
  button.dataset.sellyProduct = this.value; // `this` is the element receiving the event
});