You can make the <select> 100% of the height of the <form> that contains it. See this fiddle for an example of a div enclosing a form, with a select filling the height of the form.

This starts with a simple structure, just enough that the form is enclosed in something so you can see the relative layout.

    <div>
        <form>
        <select id="thelist" name="pets" size="6">
        <option value="1">dog</option>
        <option value="2">cat</option>
        <option value="3">hamster</option>
        <option value="4">bird</option>
        <option value="5">donkey</option>
        <option value="6">fish</option>
        </select>
        </form>
    </div>

I give the div a height, a background so you can see it, and padding so it's content doesn't naturally cover it. Make the form any height you want, including 100% of the div. I made it 90% so you can still see the enclosing div. Notice the form's width fills the div width except for the padding.

You can then just set the height of the select list to anything you want inside the form. Here's my CSS

div {
    background-color: #fff0f0;
    height: 40em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 90%;
}
#thelist {
    height: 100%;
}

Put together as a snippet, and making it smaller to fit better here...

div {
    background-color: #fff0f0;
    height: 20em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 40%;
}
#thelist {
    height: 100%;
}

<div>
    <form>
        <select id="thelist" name="pets" size="6">
            <option value="1">dog</option>
            <option value="2">cat</option>
            <option value="3">hamster</option>
            <option value="4">bird</option>
            <option value="5">donkey</option>
            <option value="6">fish</option>
        </select>
    </form>
</div>

Edit3: To hide your div not created from your loop simply wrap your div with another wrapper (that has display: none;) like so:

<div style="display: none">
    <div id="wrapper">
        <input name="num" type="button" class="btn1" id="num" value="1" />
        <div id="from">From:</div>
        <div id="startcity"></div>
        <div id="to">To:</div>
        <div id="finalcity"></div>
    </div>
</div>

Notice that if you add "display: none" to your actual wrapper then the divs created with your loop won't be displayed. This is because .cloneNode also clones the style.

Edit2:

You are using position: absolute; and setting the position of each of these elements on top of one another. This also shows that you are using the same id multiple times... which you should avoid. id's should be unique.

#apo {
    position: absolute;
    width: 39px;
    height: 23px;
    z-index: 1;
    left: 126px;
    top: 34px;
}
#startpoli {
    position: absolute;
    width: 200px;
    height: 37px;
    z-index: 2;
    left: 213px;
    top: 19px;
    background-color: #98d0d2;
}
#pros {
    position: absolute;
    width: 48px;
    height: 25px;
    z-index: 3;
    left: 122px;
    top: 74px;
}
#finalpoli {
    position: absolute;
    width: 200px;
    height: 37px;
    z-index: 4;
    left: 213px;
    top: 69px;
    background-color: #c6d298;
}

This is the result when I remove some of your css causing the problems:

Here is the modified css for the image on top:

#wrapper {
    background-color: #e5e4e2;
    height: 200px;
    width: 600px;
    padding: 5px;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.btn1{
    background-color: #CAC9DB;
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-weight: bold;
    padding: 5px;
    display: inline-block;
    }
#apo {
    text-align: justify;
    vertical-align: top;
    display: inline;
    margin-top: -10px;
}
#startpoli {
}
#apo {

    width: 39px;
    height: 23px;

}
#startpoli {
    width: 200px;
    height: 37px;
    background-color: #98d0d2;
}
#pros {

    width: 48px;
    height: 25px;

}
#finalpoli {

    width: 200px;
    height: 37px;

    background-color: #c6d298;
}

Edit: It seems that the wrapper doesn't allow itself to be added to multiple elements at the same time. So just clone ( with .cloneNode(true) ) the original er

li.appendChild(er) doesn't return an element last I checked. Just append li to your list instead of qw

var er = document.getElementById('wrapper'); 
for(var n=0;n<3;n++){
  var li = document.createElement("li");
  li.appendChild(er.cloneNode(true)); //clone original wrapper and add it to your li
  document.getElementById('list').appendChild(li); //add li to your list
}

Demo