多按鈕與按鈕

我目前有兩個下拉框，我想知道如果有人可以幫助我如何將兩個輸出值加入到一個句子中，一旦用戶按下按鈕。多按鈕與按鈕

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 

 
     <form action="action_page.php"> 
 
      <select id="selectcars" name="cars"> 
 
       <option value="volvo" selected>Volvo</option> 
 
       <option value="saab">Saab</option> 
 
       <option value="fiat">Fiat</option> 
 
       <option value="audi">Audi</option> 
 
      </select> 
 
     </form> 
 
     <div class="text-for-car" id="volvo">Your text for "Volvo"</div> 
 
     <div class="text-for-car" id="saab">Your text for "Saab"</div> 
 
     <div class="text-for-car" id="fiat">Your text for "Fiat"</div> 
 
     <div class="text-for-car" id="audi">Your text for "Audi"</div> 
 
     <style> 
 
      .text-for-car {display: none;} 
 
      #volvo {display: block;} 
 
     </style> 
 
     <script> 
 
      document.getElementById("selectcars").addEventListener("change", function() { 
 
       var id = this.options[this.selectedIndex].value; 
 
       var texts = document.getElementsByClassName("text-for-car"); 
 
       for (var i = 0; i < texts.length; i++) { 
 
       if (texts[i].id == id) texts[i].style.display = "block"; 
 
       else texts[i].style.display = "none"; 
 
       } 
 
      }) 
 
     </script> 
 
     <form> 
 
      <select id="selectcars2" name="cars2"> 
 
       <option value="volvo2" selected>Volvo</option> 
 
       <option value="saab2">Saab</option> 
 
       <option value="fiat2">Fiat</option> 
 
       <option value="audi2">Audi</option> 
 
      </select> 
 
     </form> 
 
     <div class="text-for-car2" id="volvo2">Your text for "Volvo"</div> 
 
     <div class="text-for-car2" id="saab2">Your text for "Saab"</div> 
 
     <div class="text-for-car2" id="fiat2">Your text for "Fiat"</div> 
 
     <div class="text-for-car2" id="audi2">Your text for "Audi"</div> 
 
     <style> 
 
      .text-for-car2 {display: none;} 
 
      #volvo2 {display: block;} 
 
     </style> 
 
     <script> 
 
      document.getElementById("selectcars2").addEventListener("change", function() { 
 
       var id2 = this.options[this.selectedIndex].value; 
 
       var texts2 = document.getElementsByClassName("text-for-car2"); 
 
       for (var i = 0; i < texts2.length; i++) { 
 
       if (texts2[i].id == id2) texts2[i].style.display = "block"; 
 
       else texts2[i].style.display = "none"; 
 
       } 
 
      }) 
 
     </script> 
 
    </body> 
 
</html>

任何幫助：

這是代碼我目前的工作？提前致謝！

來源

2016-10-24 S Hu

你的演示有點長，我不想分開一切，但我做了一個快速演示，應該可以幫助你解決你的問題。

http://codepen.io/paulcredmond/pen/JRxqPG

<label for="car">Car</label> 
<select id="car"> 
    <option value="Ford">Ford</option> 
    <option value="Fiat">Fiat</option> 
    <option value="Volvo">Volvo</option> 
</select> 

<label for="engine">Engine</label> 
<select id="engine"> 
    <option value="1.4 Petrol">1.4 Petrol</option> 
    <option value="1.6 Petrol">1.6 Petrol</option> 
    <option value="2.0 TDI">2.0 TDI</option> 
</select> 

<p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p> 

$('#car').on('change', function() { 
    var s = $(this).val(); 
    console.log(s); 
    $('p .car').text(s); 
}); 

$('#engine').on('change', function() { 
    var s = $(this).val(); 
    console.log(s); 
    $('p .engine').text(s); 
});

來源

2016-10-24 14:45:31

我在這裏做了改變，但你可以很容易地將事件附加到一個按鈕。 –

非常感謝！上述搜索引擎優化是否友好，因爲每個實例的文本長度爲70到10個字。 –

–

多按鈕與按鈕

回答

相關問題