HTMLドロップダウン - エラーメッセージ

Question

私は現在、選択されたオプションに基づいてテキストを表示するサブミットポールレドモンドのおかげで、送信ボタンが動作するHTMLドロップダウンオプションを使用しています。

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

<button id="process">Update</button> 

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

CodePenリンク： http://codepen.io/paulcredmond/pen/jrdowR

私は、HTMLファイルの一番下にテキストを隠すだけのユーザーを押す「更新」一度それを表示することができますどのように思っていました。

私はまた、IFコードをJSコードに追加することで、ドロップダウンが使用されていない/選択されていない場合、HTMLコードの一番下にあるテキストを編集するように指示します。

答えが非常に明白な場合、私はHTMLとJSの知識が非常に限られていて、朝の私の努力は無益だったようです。

読んでいただきありがとうございました、ありがとうございました。

編集（更新）：ここで

は、JSの編集で私の試みですが、私は、HTMLテキストのブロックを削除し、単に私のIF文からテキストを表示する方法についてはあまりよく分かりません。

$('#process').on('click', function() { 
    var car = $('#car :selected').text(); 
    var engine = $('#engine :selected').text(); 
    if (car == "Ford"){ 
    $('p .car').text("Error"); 
    $('p .engine').text("Error"); 
    } else{ 
    $('p .car').text(car); 
    $('p .engine').text(engine); 
    } 
}); 

Answer 1

私はこのための回避策を得るために管理している、それ：

1）は、ボタンが押された場合にのみ、以下のテキストが表示されます。

2.）ドロップダウンボックスから特定の値を選択した場合はテキストを非表示にし、代わりにエラーメッセージを表示する必要があります。

HTMLコード：

<!--Credit to StackOverflow member Paul Redmond--> 
<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">1.4 Petrol1</option> 
    <option value="1.6 Petrol">1.6 Petrol</option> 
    <option value="2.0 TDI">2.0 TDI</option> 
</select> 

<button id="process">Update</button> 



<a id="displayText" style="display: none"><p>Please Select Another Option</p></a> 
<div id="toggleText" style="display: none"><h1><p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p></h1></div> 

JSコード

$('#process').on('click', function() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    var car = $('#car :selected').text(); 
    var engine = $('#engine :selected').text(); 

    if (car == "Fiat"){ 
    ele.style.display = "none"; 
    text.style.display = "block"; 
    } else{ 
    ele.style.display = "block"; 
    text.style.display = "none"; 
    $('p .car').text(car); 
    $('p .engine').text(engine); 
    } 
}); 

があり、これを達成するための簡単な方法であるか、エラーが発生した場合、あなたが見つけることなら、私に知らせてください。