Question

我非常确定需要if...else声明。

我有一组用户可以选择的选项，根据所选的选项，另一组选项“价格会显示” 例如：

到目前为止，我有这个代码

JAVASCRIPT

<script type="text/javascript">
    function change (element) {
        element.style.color = "#FFFFFF";
        element.style.backgroundColor = "#5472d2"
    }
    function restore(element) {
        element.style.color = "#5472d2";
        element.style.backgroundColor = "#FFFFFF"
    }   
</script>

HTML

<form method="post" action="Url">
    <input type="hidden" name="tcount" value="1">
    <input type="hidden" name="qty_1" value="1">
    <input type="hidden" name="item_1" value="1">
    <input type="hidden" name="prog_id" value="ProgramID">
    <select style="display: inline; height: 30px; border:1px solid #5472d2;" name="pf_id_1" >
        <option value="ItemCatalogNumberA">Option A</option>
        <option value="ItemCatalogNumberB">Option B</option>
        <option value="ItemCatalogNumberC">Option C</option>
    </select>
    <input onmouseover="change(this)" onmouseout="restore(this)" style="display: inline; text-align: center; width: 105px; height: 35px; border: 1px solid #5472d2; margin-top: 0px; background: #ffffff; border-radius: 4px 4px 4px 4px; color: #5472d2;" name="submit" type="submit" value="Add to Cart" />
</form>

但我不完全确定如何实现此功能。

需要更改内容的示例图片

Answer 1

这是完成您要做的事情的一个非常基本的例子：

<body>
    <select id="first_select">
         <option disabled selected>Choose</option>
         <option value="a">A</option>
         <option value="b">B</option>
         <option value="c">C</option>     
    </select>
    <select id="second_select">
    </select>

<script>

    var firstSelect = document.getElementById('first_select');
    var secondSelect = document.getElementById('second_select');
    var secondSelectOptions;

    firstSelect.addEventListener("change", function() {
        if(this.value === 'a'){
            secondSelectOptions = "<option value='choice_1'>Choice 1</option><option value='choice_2'>Choice 2</option>"
        }
        else if(this.value === 'b'){
            secondSelectOptions = "<option value='choice_3'>Choice 3</option><option value='choice_4'>Choice 4</option>"
        }
        else{
            secondSelectOptions = "<option value='choice_5'>Choice 5</option><option value='choice_6'>Choice 6</option>"
        }

        secondSelect.innerHTML = secondSelectOptions
    })

</script>

</body>

它不漂亮，但这是你想要做的核心概念。

如何在选择下拉“产品”后动态更改下拉选项“价格”

1 个答案: