Don't use document.write() to append html code. Either use document.createElement and node.appendChild afterwards or (simpler) innerHTML as follows:

<form name="vegForm" action="veg.aspx" >
    <select onchange='this.form.submit()' id="mySelect">           
     </select>
</form>

<script>
  (function(){
    var out = '';
    for (i = 0; i < veg.length; i++) {
      out += '<option>' + veg[i] + '</option>';
    }
    document.querySelector( '#mySelect' ).innerHTML = out;
  })();
</script>

Here's one way to do it: http://jsfiddle.net/ur9fr/

JavaScript

var veg = ["1", "2", "3", "4"];
var ddl = document.getElementById("ddlVeg");
 for (i = 0; i < veg.length; i++) {
     var o = document.createElement("option");
     o.text = o.value = veg[i];
     ddl.appendChild(o);                
}

HTML

<form name="vegForm" action="veg.aspx" >
    <select onchange='this.form.submit()' id="ddlVeg">
    </select>
</form>​

If you are new to JavaScript, you would find a helper library like jQuery to be extremely beneficial. It abstracts some of the underlying complexity and ensures reasonable compatibility across browsers.

jQuery version of the same problem: http://jsfiddle.net/a95Vt/

You can do it like this:

<form name="vegForm" action="veg.aspx" >
    <select onchange='this.form.submit()'>          
    </select>
</form>
<script>
    //array created here - but get it from where ever you need..
    var veg = ["leek", "turnip", "carrot"];
    (function(){
        var form = document.getElementsByName("vegForm")[0];
        var select = form.getElementsByTagName("select")[0];

        for(var i = 0, len = veg.length; i < len; i++){
           var val = veg[i]; 
           selection.options[i] = new Option(val, val);  
        }
     })();
</script>

Here it is in action: http://jsfiddle.net/Q3SS8/3/.