Add options text to select from javascript?

[Nguyen Phuoc]

Hi all
Please help me add text to combo box from java script??
text load from database and it static
my js

<script language="JavaScript">
        
              function fncOnload(){
        	     var frm1 = document.frm1;
        	     var i = 0;        	     
        	     selParentId = frm1.parentId;
        	     <%
        	     ArrayList listCatolog = new ArrayList();
                 HttpSession getSession1 = request.getSession();                 
                 listCatolog = (ArrayList)getSession1.getAttribute("listCatolog");                 
                 int size = listCatolog.size();
                 int f = 0;
        	     %>
        	     
        	     for(i=0;i<<%=size%>;i++){
        	    	 selParentId.options[i].value=i;
        	    	 selParentId.options[i].text=<%=listCatolog.get(f).toString()%>;
        	    	 <%f=f+1;
        	    	 %>
        	    	 
        	     }
        	     
                  }        
        </script>

html combobox

<select name="parentId">
                                                
                        </select>

[Bear Bibeault]

There's no such thing as a combo box in HTML. I have fixed the subject for you.

You say JavaScript, but then show JSP code full of Java. Which is it that you want?

[Nguyen Phuoc]

Sorry Bear
I using jsp and java script
now everyone can help me add text to combo box??

[Paul Clapham]

That's the problem, then. HTML doesn't have a combo box, it just has a <select> element. You can't add text to a <select> element, you can only provide it with a list of options.

Or perhaps you could show us the Javascript you want to generate?

[Nguyen Phuoc]

I wrong .HTML doesn't have a combo box.by this way (above code) I added value to select but list options is blank

[Bear Bibeault]

You still have not answered the question: are you trying to do this in JavaScript or in Java? On the server or on the client?

[Nguyen Phuoc]

I will try

[Eric Pascarello]

What does that JavaScript look like when you view the page source?

Eric

[Nguyen Phuoc]

Thanks All !
I added options text to select .But for loop in java script cannot loop jsp scriptlet .

<script language="JavaScript">
        
              function fncOnload(){
        	     var frm1 = document.frm1;
        	     var i=0;
        	     var sl = document.frm1.parentId;       	             	             	     
        	     selParentId = frm1.parentId;
                 //frm1 is form name
        	     
        	     
        	     <%
        	     ArrayList listCatolog = new ArrayList();
                 HttpSession getSession1 = request.getSession();                
                 listCatolog = (ArrayList)getSession1.getAttribute("listCatolog");                                
                 int size = listCatolog.size();
                 int f = 0;                 
        	     %>
        	            	             	    
        	     for(i=0;i<<%=size%>;i++){
        	     var optn = document.createElement("OPTION");
        	     <%
        	     String j = listCatolog.get(f).toString();        	     
        	     %>
        	     var str = "<%=j%>";        	             	     
        	     optn.text = str;
    	    	 optn.value = i;
    	    	 sl.options.add(optn);
    	    	 
        	     }
                  }        
        </script>

Are you solutions?
PS:My projecter dont allow use JSTL

[amit punekar]

Hello,

String j = listCatolog.get(f).toString();

It seems that you are not incrementing "f" anywhere so you are getting same value from the ArrayList.

You can use jQuery as well to do this which is more cleaner and nicer approach to handle such scenarios.


Regards,
amit

[Nguyen Phuoc]

amit punekar wrote:Hello,

String j = listCatolog.get(f).toString();

It seems that you are not incrementing "f" anywhere so you are getting same value from the ArrayList.

You can use jQuery as well to do this which is more cleaner and nicer approach to handle such scenarios.


Regards,
amit

Uhm.I think so
But I don't know jQuery

[Eric Pascarello]

Eric Pascarello wrote:What does that JavaScript look like when you view the page source?

Eric

[Nguyen Phuoc]

Hi Eric .I will show all code

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@page language="java" import="java.util.*" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <title>JSP Page</title>
        
        <script language="JavaScript">
        
              function fncOnload(){
        	     var frm1 = document.frm1;
        	     var i=0;
        	     var sl = document.frm1.parentId;
        	     
        	     
        	     frm1.txtProID.disabled=true;
        	     frm1.txtProClass.disabled=true;
        	     selProUnit = frm1.proUnit;
        	     selProStatus = frm1.proStatus;
        	     selParentId = frm1.parentId;
        	     
        	     
        	     <%
        	     ArrayList listPro1,listCatolog = new ArrayList();
                 HttpSession getSession1 = request.getSession();
                 listPro1 = (ArrayList)getSession1.getAttribute("proList");
                 listCatolog = (ArrayList)getSession1.getAttribute("listCatolog");
                 String proUnit = listPro1.get(6).toString();
                 String proStatus = listPro1.get(7).toString();                 
                 int size = listCatolog.size();
                 int f = 0;                 
        	     %>
        	     
        	     
        	     selProUnit.selectedIndex =<%=proUnit%>;
        	     selProStatus.selectedIndex =<%=proStatus%>;
        	     for(i=0;i<<%=size%>;i++){
        	     var optn = document.createElement("OPTION");
        	     <%
        	     String j = listCatolog.get(f).toString();        	     
        	     %>
        	     var str = "<%=j%>";        	             	     
        	     optn.text = str;
    	    	 optn.value = i;
    	    	 sl.options.add(optn);
    	    	 
        	     }
                  }        
        </script>
        
    </head>
    <body onload="javascript:fncOnload();">
       <form name="frm1" method="POST">
        <table border="1" bordercolor=black>                   
            <tbody>
            <%
            try{
          ArrayList listPro = new ArrayList();
          HttpSession getSession = request.getSession();
          listPro = (ArrayList)getSession.getAttribute("proList");
          String parentID = listPro.get(4).toString();
          
          
        %>            
                <tr>
                    <td bgcolor="Green" width="250">Product ID</td>
                    <td><input type="text" name="txtProID" value="<%=listPro.get(0).toString()%>"/></td>
                </tr>
                <tr>
                    <td bgcolor="Green" >Product Class</td>
                    <td><input type="text" name="txtProClass" value="<%=listPro.get(1).toString()%>" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Name</td>
                    <td><input type="text" name="txtName" value="<%=listPro.get(2).toString()%>" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Name-J</td>
                    <td><input type="text" name="txtNameJ" value="<%=listPro.get(3).toString()%>" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Parent ID</td>
                    <td><select name="parentId">
                                               
                        </select>
                     </td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Quantity Unit</td>
                    <td><input type="text" name="txtProQUnit" value="<%=listPro.get(5).toString()%>" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Unit</td>
                    <td>
                         <select name="proUnit">
                            <option value="" >-----</option>
                            <option value="1" >kg</option>
                            <option value="2" >pcs</option>
                            <option value="3" >ml</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Status</td>
                    <td><select name="proStatus">
                            <option value="" >------</option>
                            <option value="1" >Normal</option>
                            <option value="2">Delete</option>
                            <option value="3">Discontinued</option>
                        </select></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Quantity Alert</td>
                    <td><input type="text" name="txtAlert" value="<%=listPro.get(8).toString()%>" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Notes</td>
                    <td><textarea name="txtNotes" rows="4" cols="20" >
                        <%=listPro.get(9).toString()%></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                    <input type="submit" value="Cancel" name="btnCancel" style="height: 30px; width: 80px"/>
                    <input type="submit" value="OK" name="btnOk" style="height: 30px; width: 80px" onclick="javascript:window.close();"/>
                    </td>
                </tr>
                <%
            }catch(Exception ex){
            	ex.printStackTrace();
            }
                %>                
            </tbody>
            
        </table>
    </form>
    </body>
</html>

[Eric Pascarello]

Nguyen Phuoc wrote:Hi Eric .I will show all code

I do not care about the serverside code, I care about what is generated to the page that the JavaScript actually sees. View page source in the browser, grab that code.

Eric

[Nguyen Phuoc]

Eric Pascarello wrote:

Nguyen Phuoc wrote:Hi Eric .I will show all code

I do not care about the serverside code, I care about what is generated to the page that the JavaScript actually sees. View page source in the browser, grab that code.

Eric

OK men

 
<!DOCTYPE html>
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <title>JSP Page</title>
        
        <script language="JavaScript">
        
              function fncOnload(){
        	     var frm1 = document.frm1;
        	     var i=0;
        	     var sl = document.frm1.parentId;
        	     
        	     
        	     frm1.txtProID.disabled=true;
        	     frm1.txtProClass.disabled=true;
        	     selProUnit = frm1.proUnit;
        	     selProStatus = frm1.proStatus;
        	     selParentId = frm1.parentId;
        	     
        	     
        	     
        	     
        	     
        	     selProUnit.selectedIndex =1;
        	     selProStatus.selectedIndex =0;
        	     for(i=0;i<3;i++){
        	     var optn = document.createElement("OPTION");
        	     
        	     var str = "C000000001";        	             	     
        	     optn.text = str;
    	    	 optn.value = i;
    	    	 sl.options.add(optn);
    	    	 
        	     }
                  }        
        </script>
        
    </head>
    <body onload="javascript:fncOnload();">
       <form name="frm1" method="POST">
        <table border="1" bordercolor=black>                   
            <tbody>
                        
                <tr>
                    <td bgcolor="Green" width="250">Product ID</td>
                    <td><input type="text" name="txtProID" value="P000000012"/></td>
                </tr>
                <tr>
                    <td bgcolor="Green" >Product Class</td>
                    <td><input type="text" name="txtProClass" value="P" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Name</td>
                    <td><input type="text" name="txtName" value="PRODUCT 12" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Name-J</td>
                    <td><input type="text" name="txtNameJ" value="PRODUCT 12" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Parent ID</td>
                    <td><select name="parentId">
                                               
                        </select>
                     </td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Quantity Unit</td>
                    <td><input type="text" name="txtProQUnit" value="123458" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Unit</td>
                    <td>
                         <select name="proUnit">
                            <option value="" >-----</option>
                            <option value="1" >kg</option>
                            <option value="2" >pcs</option>
                            <option value="3" >ml</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Status</td>
                    <td><select name="proStatus">
                            <option value="" >------</option>
                            <option value="1" >Normal</option>
                            <option value="2">Delete</option>
                            <option value="3">Discontinued</option>
                        </select></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Product Quantity Alert</td>
                    <td><input type="text" name="txtAlert" value="0" /></td>
                </tr>
                <tr>
                    <td bgcolor="Green">Notes</td>
                    <td><textarea name="txtNotes" rows="4" cols="20" >
                        CATEGORY 1 - PRODUCT 12</textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                    <input type="submit" value="Cancel" name="btnCancel" style="height: 30px; width: 80px"/>
                    <input type="submit" value="OK" name="btnOk" style="height: 30px; width: 80px" onclick="javascript:window.close();"/>
                    </td>
                </tr>
                                
            </tbody>
            
        </table>
    </form>
    </body>
</html>

[Eric Pascarello]

So that code runs fine.

I am guessing that is not what you want. I am guessing that the select options should be different and be from something on the server.

In that case you can not just use plain old jsp to write the values to the page. You are going to have to learn about Ajax. Look into linked selects or double combos.

Eric

[Nguyen Phuoc]

Eric Pascarello wrote:So that code runs fine.

I am guessing that is not what you want. I am guessing that the select options should be different and be from something on the server.

In that case you can not just use plain old jsp to write the values to the page. You are going to have to learn about Ajax. Look into linked selects or double combos.

Eric

Thank eric
that code run fine but i see problem at

String j = listCatolog.get(f).toString(); 

for loop in javascript dont run jsp that code .When this select box "parentId" blank(value added but text blank)

[Eric Pascarello]

JavaScript and JSP run in two different places. They can not interact with one another. Nice article: http://www.javaranch.com/journal/200510/Journal200510.jsp#a1

Eric