ボタンを使用した複数のドロップダウン

私は現在2つのドロップダウンボックスを持っていますが、ユーザーがボタンを押すと、2つの出力値を1つの文に結合する方法について、ボタンを使用した複数のドロップダウン

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

ここで私は変化にやったが、あなたは簡単にボタンにイベントを添付することができます。 –

ありがとう！上記のSEOはフレンドリーですか？各インスタンスのテキストは70〜10語です。 –

–

ボタンを使用した複数のドロップダウン

答えて

関連する問題