再び非表示になったときにドロップダウンリストの値をリセットする

ユーザーが希望する「エリア」を選択すると、その特定のエリアのオプションが表示されます。私は、選択できる領域ごとに異なる隠れたドロップダウンを持っています。ユーザーが選択した後で別の「エリア」を選択すると、「area_options」が再び非表示になります。「area_options」を隠すと、選択した値を元の値に戻すことは可能ですか？再び非表示になったときにドロップダウンリストの値をリセットする

<script type='text/javascript'> 
var area = document.getElementById('area'); 
var area_options = document.getElementById('area_options'); 


if(area.value === 'selection') { 
        area_options.style.display = 'block'; 

       } else if(area.value != 'selection') { 
        area_options.style.display = 'none'; 

       } else { 
      } 
</script> 

<html> 
<tr>  
<td align='center'> 
<select class='dropdown1' name='area' id='area' style='display: none;'>  
<option selected disabled>Problem Area</option> 

<?php 
foreach($array_area as $value){ 
echo "<option value='$value'>$value</option>"; } 
?> 

</td> 
</tr> 
</select> 

<tr> 
<td align='center'> 
<div id='area_options' style='display: none;'> 
<select class='dropdown1' name='area_options'> 
<option selected disabled>Area Options</option> 

<?php 
foreach($array_areaoptions as $value){ 
echo "<option value='$value'>$value</option>"; } 
?> 

</div> 
</td> 
</tr> 
</select> 

</html>

出典

2017-07-20 JerryB

元の値では、「問題の領域」を意味しますか？ –

いいえ、問題領域が再度変更された場合は、area_optionsの値をリセットします。 – JerryB

-1

あなたはjQueryのを使用してこれを達成することができます

まず、jQueryのJavaScriptライブラリであり、それは目的があなたのウェブサイト上ではJavaScriptを使用して、それははるかに簡単にすることですです。 Get started with jQuery

だから、この仕事をするために、まずあなたは<head>セクション内でこの<script>タグを配置することにより、WebページにjQueryのを追加する必要があります。上記のコードは<select>（ "エリア"）に変更イベントを処理する関数を添付します

<script> 
    $(function(){ 
     $('select[name=area]').on('change', function() { 
      $('select[name=area_options]').prop('selectedIndex',0); 
     }); 
    }); 
</script>

：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

その後、クロージング</body>前に、この機能を追加します。

出典

2017-07-20 12:54:40

この回答をダウンして投票してくださった方は、よろしくお願いします。 –

このコードをの中に入れてみました。の前に配置しました。それは機能していないようです。 – JerryB

あなたのJQueryスクリプトは、自分のJavascript呼び出しの下で自分の.jsファイル – JerryB

再び非表示になったときにドロップダウンリストの値をリセットする

答えて

関連する問題