实现一个下拉框

$sc.prototype.creatSearchBox=function(searchBoxDiv,initnumber){

	var textDiv=document.createElement("input");

	textDiv.id=this.searchTextId;

	textDiv.type="text";

	textDiv.size="60";

	textDiv.className="search-text";

	searchBoxDiv.appendChild(textDiv);

	

	var buttonDiv=document.createElement("div");

	buttonDiv.id=this.searchButtonId;

	buttonDiv.className="search-button";

	searchBoxDiv.appendChild(buttonDiv);

	$(buttonDiv).hover(	

		function(){$(this).addClass("search-button-hover");},

		function(){$(this).removeClass("search-button-hover");}

	);

}

代码本来是这样的，现在我想加一个下拉框：
<select>
  <option value ="上海市">上海市</option>
  <option value ="北京市">北京市</option>
</select>
我这样加实现不了，出不来下拉框的效果：

$sc.prototype.creatSearchBox=function(searchBoxDiv,initnumber){

    var optionDiv = document.createElement("option");

   optionDiv.id =this.searchOptionId;

    optionDiv.type = "option";

    optionDiv.value = "北京市";

    optionDiv.text = "北京市";

    optionDiv.value = "上海市";

    optionDiv.text = "上海市";

    searchBoxDiv.appendChild(optionDiv);

	

	var textDiv=document.createElement("input");

	textDiv.id=this.searchTextId;

	textDiv.type="text";

	textDiv.size="60";

	textDiv.className="search-text";

	searchBoxDiv.appendChild(textDiv);

	

	var buttonDiv=document.createElement("div");

	buttonDiv.id=this.searchButtonId;

	buttonDiv.className="search-button";

	searchBoxDiv.appendChild(buttonDiv);

	$(buttonDiv).hover(	

		function(){$(this).addClass("search-button-hover");},

		function(){$(this).removeClass("search-button-hover");}

	);

------解决方案--------------------

    var sel=document.createElement('select');;

    sel.options.add(new Option("北京市", "北京市"));

    sel.options.add(new Option("上海市", "上海市"));

    searchBoxDiv.appendChild(sel);

------解决方案--------------------

$sc.prototype.creatSearchBox=function(searchBoxDiv,initnumber){

    var optionDiv = document.createElement("select");

    optionDiv.id =this.searchOptionId;

    optionDiv.options.add(new Option("北京市", "北京市"));

    optionDiv.options.add(new Option("上海市", "上海市"));

    searchBoxDiv.appendChild(optionDiv);

     

    var textDiv=document.createElement("input");

    textDiv.id=this.searchTextId;

    textDiv.type="text";

    textDiv.size="60";

    textDiv.className="search-text";

    searchBoxDiv.appendChild(textDiv);

     

    var buttonDiv=document.createElement("div");

    buttonDiv.id=this.searchButtonId;

    buttonDiv.className="search-button";

    searchBoxDiv.appendChild(buttonDiv);

    $(buttonDiv).hover(