在html中显示任一下拉列表

Display either one of the dropdown in html

本文关键字：任一 下拉列表 显示 html      更新时间：2023-09-26

我正在尝试基于页面的一个uniqueid显示下拉列表。我无法访问html中的uniqueid，所以我将每个下拉列表的单独id隐藏起来，并根据uniqueid的值显示一个下拉列表。

但问题是，即将到来的值有一个逗号（，），这是不需要的。有没有什么方法可以让我在HTML中访问uniqueid的值并显示下拉列表（我不想显示一个并隐藏另一个。）

<select  id="x" style="margin-top: 20px">
   <c:forEach items="${reporttypes}" var="reporttype">        
           <option value="${reporttype.reportTypeName}">${reporttype.reportTypeName}</option>        
   </c:forEach>
</select>
<select  id="y" style="margin-top: 20px">                             
   <c:forEach items="${reporttypes}" var="reporttype">
       <option value="${reporttype.reportTypeName}">${reporttype.reportTypeName}</option>        
   </c:forEach>                                    
</select>

 if(document.getElementById("abc").value == "TTL"){           
               $('#x').show();
               $('#y').hide();
            } 
            else {
                 $('#x').hide();
               $('#y').show();
              }    
        });

现在我正在尝试这样做，但它不起作用

 <select name="typeOption" id="typeOptionIdTTL" class="typeOptionClassTTL" style="margin-top: 20px">    
  <script> 
    if(document.getElementById("abc")=="TTL"){
        <c:forEach items="${reporttypes}" var="reporttype">
           <option value="${reporttype.reportTypeName}">${reporttype.reportTypeName}</option>
         </c:forEach>
     }
      </script>
    </select>

现在，而不是用html调用脚本。我正在调用此函数，但仍然无法工作。

function PopulateTypeOption(){     
         <c:forEach items="${reporttypes}" var="reporttype">
            if(document.getElementById("abc")=="TTL"){
                   select.append($('<option></option>').val(${reporttype.reportTypeName}).html(${reporttype.reportTypeName}));
            }
            else{
                     select.append($('<option></option>').val(${reporttype.reportTypeName}).html(${reporttype.reportTypeName}));
                               }
         </c:forEach>
    }

用javascript创建一个函数，该函数将在运行时填充选项。调用document.ready中的函数。例如

function Populate(){        
         if(document.getElementById("abc").value == "TTL" ){
            <c:forEach items="${reporttypes}" var="reporttype">
                 $("#x").append("<option values =${reporttype.reportTypeName}>${reporttype.reportTypeName}</option>");
             </c:forEach>
         }
         else{
            <c:forEach items="${reporttypes}" var="reporttype">
                   $("#abc").append("<option values =${reporttype.reportTypeName}>${reporttype.reportTypeName}</option>");
            </c:forEach>
         }         
      }

你不需要两个独立的id x和y。现在只需要一个就足够了。

相关文章：