Question

一旦用户选择了他们想要的＆＃34;区域＆＃34;，他们就会看到该特定区域的选项。对于可以选择的每个区域，我有一个不同的隐藏下拉列表。如果用户决定返回并选择不同的＆＃34;区域＆＃34;一旦做出选择，＆＃34; area_options＆＃34;再次隐藏起来。隐藏＆＃34; area_options＆＃34;时，是否可以将所选值恢复为原始值？

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

Answer 1

您可以使用JQuery实现此目的：

首先，JQuery是一个JavaScript库，其目的是让您在网站上使用JavaScript变得更加容易。 Get started with jQuery

因此，要完成这项工作，首先必须将<script>标记放在<head>部分中将jQuery添加到您的网页。

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

然后，在结束</body>之前，添加此功能：

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

上面的代码将附加一个函数来处理更改事件到<select>（“区域”）。

再次隐藏时，重置下拉列表的值

1 个答案: