CODEWITHSUNDEEP
javascriptjqueryhtmljsp
XXDebugger
XXDebugger

Reputation: 1581

Display either one of the dropdown in html

I am trying to display dropdown based on one uniqueid of the page. I cannot access that uniqueid in the html so taking the separate id's of each dropdown I am hiding one and showing one dropdown based on the value of uniqueid.

But the problem is the value coming has one comma(,) which is not desired. Is there any way by which I can access the value of uniqueid in HTML and display the dropdowns ( I dont want to show one and hide another. )

<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();
              }    
        });

now I am trying to do this but it doesnt work 

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

now instead of calling the script in html. I am calling this function but still not working.

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

Upvotes: 1

Views: 76

Answers (1)

tryingtolearn
tryingtolearn

Reputation: 177

create a function in javascript which will populate the options at run time. call that function in document.ready. for eg.

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

you dont need 2 separate ids x and y. only one will suffice now.

Upvotes: 1

Related Questions