html select control appear empty

Question

0.00/5 (No votes)

See more:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script type="text/javascript">
       var numOfDep = 0;
       var Myvalues = new Array();
       var selecID = "";
       function FillSelect(selectValue,SelectText)
       {
           var id = document.getElementById(selecID);
           var opt = document.createElement('option');
           opt.text = SelectText;
           id.appendChild(opt);
       }
       function AddDependent()
       {
           numOfDep++;
           var mainDiv = document.getElementById('MainDiv');
               var newDiv = document.createElement('div');
               newDiv.setAttribute('id', "ContainerDiv" + numOfDep);
               var newSpan = document.createElement('span');
               newSpan.innerHTML = "Insert Dependents No" + numOfDep + ":";
               var newTextBox = document.createElement('input');
               newTextBox.type = 'text';
               newTextBox.id = 'txt_Dep' + numOfDep;
               var NewSelect = document.createElement('input');
               NewSelect.id = 'select_Rela' + numOfDep;
               selecID = NewSelect.id;
               newDiv.appendChild(newSpan);
               newDiv.appendChild(newTextBox);
               newDiv.appendChild(NewSelect);
               mainDiv.appendChild(newDiv);
               FillSelect("Father");
               FillSelect("Mother");
               FillSelect("wife");
               
       }

   </script>
</head>
<body dir="ltr">
    <form id="form1" runat="server">
    <div id="MainDiv">
      <input id="Button1" type="button" value="Add Dependents" onclick="AddDependent();"/>
       
    </div>
    </form>
   
</body>
</html>

I need to fill select control that created in runtime

Posted 24-Mar-14 1:38am

medo67866

Add a Solution

Comments

ArunRajendra 24-Mar-14 7:41am

Should not fillselect take 2 params?

enhzflep 24-Mar-14 9:46am

You seem to be neglecting the fact that (a) the FillSelect function takes two vars, yet you only provide it with one. the result is that SelectValue holds the only data you pass to that function, _yet_ it is unused in the function. That's not going to end well!

You also made a mistake with the line:
var NewSelect = document.createElement('input');

Can you see the problem here? (Hint: you should be creating a select element, not an input one)

Another improvement is to use the ability to create option elements directly. I.e, you can write something like: var newOpt = new Option(optText, optValue);

So, basically, you need to:

a) Make var NewSelect = document.createElement('input'); into var NewSelect = document.createElement('select');

b) Add a second param to your calls to FillSelect

c) Consider replacing the option creation code (1 line does more than you do in 2)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-03-24T04:05:00

Problems

The Select Control creation should take select as a argument instead of input. So, change following code...
JavaScript
```
var NewSelect = document.createElement('input');
```
to...
JavaScript
```
var NewSelect = document.createElement('select');
```
FillSelect function takes two parameters. But it does not use selectValue parameter. So, change following code...

JavaScript
```
FillSelect("Father");
FillSelect("Mother");
FillSelect("wife");
```
to...

JavaScript
```
FillSelect("Father", "Father");
FillSelect("Mother", "Mother");
FillSelect("wife", "wife");
```
You can also delete the parameter selectValue from function and call the function only with SelectText parameter.

Demo

[Issue] html select control appear empty[^]