Link to home
Start Free TrialLog in
Avatar of BILL Carlisle
BILL CarlisleFlag for United States of America

asked on

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

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
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

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

Avatar of BILL Carlisle

ASKER

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. ????
Show all involved lists as an example.

<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

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.
ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
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 ;-)
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 ??
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.
Exactly what I asked for.. though I can't use it due to the tool I am using.