We help IT Professionals succeed at work.

Dynamically create select lists using javascript and the selection made of a fixed list.

2,612 Views
Last Modified: 2013-11-19
Hi,
I want ot have a LOV- select list on a page.
The selection of the LOV will call AJAX and return the options for each LOV, this I have an idea of.
How do I dynamically create a select list in a page using javascript?

End goal is to display 0-8 LOVs depending on selection of fixed LOV
Comment
Watch Question

ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Here an example:
<html>
<head>
<title>Zvonko &#42;</title>
<script>
var myLOV = "val1;val2;val3;val4;val5".split(";");
 
function setOpt(){
  var opt = document.forms[0].mySel.options;
  opt.length = 1;
  for(var i=0;i<myLOV.length;i++){
    var sVal = myLOV[i];
    opt[opt.length] = new Option(sVal, sVal);
  }
}
 
window.onload = setOpt;
</script>
</head>
<body>
<form>
<select name="mySel" onChange="alert(this.value)" >
<option>-Select-</option>
</select>
</form>
</body>
</html>

Open in new window

BILL CarlisleAPEX Developer

Author

Commented:
I have to create the select list not just the options. I don't know how many until I select my choice in the fixed one.

And I don't want to reload the page, just have them appear in the page. ????
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Show all involved lists as an example.
BILL CarlisleAPEX Developer

Author

Commented:

<html>
<head>
<title>Bills &#1;</title>
<script language="JavaScript" type="text/javascript">
function getSrchFields(user_type){
   if(user_type=='AUDITOR'){
      // create 5 LOVs dynamically
   } else if(user_type=='CLIENT'){
      // create 1 LOV dynamically
   } else if(user_type=='EXAMINER'){
      // create 3 LOVs dynamically
   } else if(user_type=='OFFICE'){
      // create 8 LOVs dynamically
   etc
}
</script>
</head>
<body>
<form>
<select name="p_t01" size="1"  id="PFIXED_LOV" tabindex=10; onchange="getSrchFields(this);">
<option  value="%null%">Select a Parameter</option>
<option  value="AUDITOR">Auditor</option>
<option  value="CLIENT">Client</option>
<option  value="EXAMINER">Examiner</option>
<option  value="OFFICE">Office</option>
<option  value="SUPERVISOR">Supervisor</option>
</select>
</form>
</body>
</html>

Open in new window

BILL CarlisleAPEX Developer

Author

Commented:
I know i'd have to dynamically create the JS code to process the form also but right now I just want to create X number of <select id='blah' > </select> shells and show on the page.

Then I want to add the code that would be called to get the selected values and agaion call AJAX to save to DB. - I know how to do that part.
Systems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
BILL CarlisleAPEX Developer

Author

Commented:
Yes, I am fining the out, but the user creates forms dynamically and I need to dynamically build and process them. I have created my html and javascript process and set to the innerHTML of a div.
BUT, the submit doesn't work because the page doesn't have those items declared to receive the POST of them. (I think that's the problem)

Is there a way not to POST the items ? I am building a comma delimted argument and setting it to a fixed HIDDEN item so I don't need the dynamically built ones after I build the string.

Any ideas?
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
First you speak about LOV now you tell me something about DIV...
Look at my code then you will see why my code does submit the values and yours does not.

And I have more ideas then you can think about it ;-)
BILL CarlisleAPEX Developer

Author

Commented:
Your code works great! And that is what I asked for.. but
I ran into a snag..

If I create items dynamically and those items are sent when POSTed then they must be on the receiving side or I get a "Page Not Found".
Any suggestions..

I deal with the dyn items with javascript but I'm using Oracle APEX tool and believe it is expecting to have those items defined in the tool ??
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Can you please close this question and open a new one in the Oracle topic area.
You can leave a reference for me when you want me to participate in that new question.
BILL CarlisleAPEX Developer

Author

Commented:
Exactly what I asked for.. though I can't use it due to the tool I am using.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.