如何在選擇下拉式「產品」後動態更改下拉選項「價格」

我很肯定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>

但我不完全確定如何實現此功能。

例如需要改變什麼

來源

2017-03-18 TopoX

對於它的價值，我建議避免使用內聯樣式。外部樣式表是最好的，但在文檔的''中使用''標籤將可以正常工作。 – skwidbreth

我會試試看，謝謝:) – TopoX

這裏是一個非常簡單的例子來完成圖片你希望做：

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

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

來源

2017-03-18 18:47:11 skwidbreth

非常感謝你，造型可以在以後的時間完成，我需要的是能夠學習和提高技能的概念 – TopoX

如何在選擇下拉式「產品」後動態更改下拉選項「價格」

回答

相關問題