Question

我有一个下拉菜单，单击该主题后，它将打开列表中的选定字段。一次单击是否可以显示两个或多个div？

这是我当前的代码；

    <script type="text/javascript">
         function showfield(name){


 if(name=='Hijacking')document.getElementById('div1').innerHTML='Registration: 
     <input type="text" name="reg" />' +
            'Make: <input type="text" name="make" /> ' + 'Model: <input 
     type="text" name="model" />';
        else document.getElementById('div1').innerHTML='';
        if document.getElementById('div2').innerHTML='Name: <input type="text  
         ="name" />';
        else document.getElementById('div2').innerHTML='';
       }
     </script>

<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
    <option selected="selected">Please select ...</option>
    <option value="Hijacking">Hijacking</option>
    <option value="Theft">Theft</option>
    <option value="Overdue Rental">Overdue Rental</option>
    <option value="Other">Other</option>
</select>
<div id="div1"></div>
<div id="div2"></div>

所以我已经尝试过了

if(name=='Hijacking')document.getElementById('div1' 'div2').innerHTML='Registration: <input type="text" name="reg" />' +
                'Make: <input type="text" name="make" /> ' + 'Model: <input type="text" name="model" />';
            else document.getElementById('div1').innerHTML='';

我的目的是让div1和div2在允许说劫持时显示，原因是让div 2在我的下拉菜单中的其他选择中具有共同的字段

第二次尝试：

<script type="text/javascript">
       $('select[name="travel_arriveVia"]').change(function(){
        if ($(this).val() == "Hijacking"){
            $("#div1, #div2).show();
        }
    });
</script>

<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
    <option selected="selected">Please select ...</option>
    <option value="Hijacking">Hijacking</option>
    <option value="Theft">Theft</option>
    <option value="Overdue Rental">Overdue Rental</option>
    <option value="Other">Other</option>
</select>

<div class="Hijacking" id="div1" style="display:none;">
    Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
    More html
</div>

Answer 1

使用jQuery

作为参考：https://jquery.com/

您可以使用jQuery更改代码。

这是一个有效的示例：https://jsfiddle.net/8a20rkwt/

在您的头部，像这样包含jquery：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

然后像这样使用它，只需单击一下即可通过id显示多个元素：

<script>
 $(function() {

    $('#travel_arriveVia').change(function(){
        $(".Hijacking").hide();
        if ($(this).val() == "Hijacking"){
            $("#div1, #div2").show();
        }
    });

  });
</script>

在您的html中：

 <select name="travel_arriveVia" id="travel_arriveVia">
    <option selected="selected">Please select ...</option>
    <option value="Hijacking">Hijacking</option>
    <option value="Theft">Theft</option>
    <option value="Overdue Rental">Overdue Rental</option>
    <option value="Other">Other</option>
</select>

<div class="Hijacking" id="div1" style="display:none;">
    Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
    More html
</div>

有关jQuery change事件处理程序的更多详细信息，请参见：https://api.jquery.com/change/

getelementbyid多个ID显示

1 个答案:

使用jQuery