实现一个下拉框

Question

$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");}
);

Answer 1

    var sel=document.createElement('select');;
    sel.options.add(new Option("北京市", "北京市"));
    sel.options.add(new Option("上海市", "上海市"));
    searchBoxDiv.appendChild(sel);

Answer 2

$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( 
        function(){$(this).addClass("search-button-hover");},
        function(){$(this).removeClass("search-button-hover");}
    );