مشكلة في إنشاء القوائم (select) باستخدام الجافاسكربت

السلام عليكم ورحمة الله ،،

قمت بعمل قائمة عن طريق الجافاسكربت،، و أردت إعطائها حجم معين لكن المشكلة أن الحجم لا يظهر على شكل القائمة ،، بل تبدو صغيرة جدا و السهم لايزال موجود مع أن الحجم كبير نوعا ما ، والقائمة فارغة ،،

بينما الطريقة العادية لإنشاء القوائم عن طريق كود Html تظهر القائمة بالحجم المطلوب ،،،،

آمل منكم التفضل بمساااعدتي ، وسأكون لكم شاكرة وممتنة ،،،

هنا الطريقة العادية :

<html>
<head></head>
<body>
<select id="list" size="20"></select>
</body>
</html>

وهنا باستخدام الجافا سكربت :

<html>
<head>
<script type = "text/javascript">
function f()
{
  var Sel = document.createElement("select");
	  Sel.id = "selId";
	  Sel.size = 10;

  var b = document.getElementById("bid");
	  b.appendChild(Sel);
}
	</script>

</head>

<body id="bid" onload="f()">
</body>
</html>