动态加载select标签下拉框数据

参考：

1.示例参考：http://www.w3schools.com/jsref/coll_select_options.asp

2.js中select下拉框常用操作方法：http://www.php100.com/html/program/jquery/2013/0905/5931.html

3.js select option对象小结: http://www.jb51.net/article/44657.htm

4.js如何控制select标签哪个被选中：http://zhidao.baidu.com/link?url=z4hDFftJQ66TX4u8yjRQlnp5tmaCunK08El2Q3s0z_HDkO75FAmDb4asDQ8kOJukP4jJx-IJUJcuOmpJjaHnRa

 

加载DAO数据：(静态）

<%
List<CardTypeGroup> cardTypeGroups = CardTypeGoupDAO.gerCardTypeGroup();
	Iterator<CardTypeGroup> itCardTypeGroup = cardTypeGroups.iterator();
	String cardTypeGroupIdString = "";
	while(itCardTypeGroup.hasNext()){
		CardTypeGroup ctg = itCardTypeGroup.next();
		cardTypeGroupIdString += ctg.getCardTypeGroupId() + ",";
	}
	cardTypeGroupIdString = cardTypeGroupIdString.substring(0,cardTypeGroupIdString.length()-1);
	
	List<Denomination> denominations = DenominationDAO.gerDenomination();
	Iterator<Denomination> itDenomination= denominations.iterator();
	String denominationIdString = "";
	while(itDenomination.hasNext()){
		Denomination den = itDenomination.next();
		denominationIdString += den.getDenominationId() + ",";
	}
	denominationIdString = denominationIdString.substring(0,denominationIdString.length()-1);
	
	List<Operator> operators = OperatorDAO.gerOperator();
	Iterator<Operator> itOperator = operators.iterator();
	String operatorIdString = "";
	while(itOperator.hasNext()){
		Operator op = itOperator.next();
		operatorIdString += op.getOperatorId() + ",";
	}
	operatorIdString = operatorIdString.substring(0,operatorIdString.length()-1);
%>

 

动态加载数据：

function selectOptions(){
		console.log("selectOption");
		
		var cardTypeGroup_selectObj = document.getElementById("select_cardTypeGroupId");
		var denomination_selectObj = document.getElementById("select_denominationId");
		var operator_selectObj = document.getElementById("select_operatorId");
		
		var cardTypeGroup_datas = "<%=cardTypeGroupIdString%>".split(",");
		var denomination_datas = "<%=denominationIdString%>".split(",");
		var operator_datas = "<%=operatorIdString%>".split(",");
		
		
		//console.log("length : " + cardTypeGroup_selectObj.options.length);
		
		if(cardTypeGroup_selectObj.options.length == 1){
			for (var i = 0; i < cardTypeGroup_datas.length; i++) {
				cardTypeGroup_selectObj.options.add(new Option(cardTypeGroup_datas[i],
															   cardTypeGroup_datas[i])); //("text","value")
			}
		}
		
		if(denomination_selectObj.options.length == 1){
			for (var i = 0; i < denomination_datas.length; i++) {
				denomination_selectObj.options.add(new Option(denomination_datas[i],
															  denomination_datas[i]));
			}
		}
		
		if(operator_selectObj.options.length == 1){
			for (var i = 0; i < operator_datas.length; i++) {
				operator_selectObj.options.add(new Option(operator_datas[i],
														  operator_datas[i]));
			}
			
		}
			
	}

 

点解添加按钮后调用：

function newExchangeRate(cell){
		 clearReqMsg(cell);
		var table = document.getElementById('tab_exchangeRate');
		var newRow = table.insertRow(-1);
		var td0 =newRow.insertCell(0); 
		td0.innerHTML = '<select id="select_cardTypeGroupId" name="cardTypeGroupId" style="width: 100px;" onfocus="selectOptions()" >'
		+'<option value="">-- select --</option>'
		+'</select>';	
		
		var td1 =newRow.insertCell(1); 
		td1.innerHTML = '<select id="select_denominationId" name="denominationId" style="width: 100px;" onfocus="selectOptions()" >'
		+'<option value="">-- select --</option>'
		+'</select>';
		var td2 =newRow.insertCell(2); 
		td2.innerHTML = '<select id="select_operatorId" name="operatorId" style="width: 100px;" onfocus="selectOptions()" >'
		+'<option value="">-- select --</option>'
		+'</select>';
		var td3 =newRow.insertCell(3);
		td3.innerHTML = '<input type="text" name="exchangePriceHkd" style="width: 60px;">';
		var td4 =newRow.insertCell(4);
		td4.innerHTML = '<input type="button" value="Add" onclick="exchangeRateAction(this)"> '
		+'<input type="button" value="Delete" onclick="deleteNew(this)">';
	}

 

点击ADD后：

function exchangeRateAction(cell){
		var url = "admin";
		var action = "adminAction=exchangeRate"+cell.value;
		var formname = "exchangeRateForm";
		
		console.log("cell value : " + cell.value);
		if(cell.value.toUpperCase()=="DELETE"){
			action += "&cardTypeGroupId="+getRow(cell).cells[0].innerHTML;
			action += "&denominationId="+getRow(cell).cells[1].innerHTML;
			action += "&operatorId="+getRow(cell).cells[2].innerHTML;
		}else{
			var row=getRow(cell);
			var cellsLength = getTable(cell).rows.item(0).cells.length;
			for(var i=0;i<cellsLength-1;i++){
				action+="&"+row.cells[i].childNodes[0].name+"="+row.cells[i].childNodes[0].value;
			}
		}
		
		if(window.confirm('Confirm to '+ cell.value+' ?')){
			xmlhttpPost(cell,url,action);
		 }else{
		    return false;
		}
	}

 

注：

row.cells[i].childNodes[0].name ： 获得select标签的name属性值
row.cells[i].childNodes[0].value ： 获得select标签的value属性值

 

补充：

function getRowIndex(cell) {
	return cell.parentNode.parentNode.rowIndex;
}

function getTableId(cell) {
	return tableId = cell.parentNode.parentNode.parentNode.parentNode.id;
}

function getTable(cell) {
	return document.getElementById(getTableId(cell));
}

function getRow(cell) {
	//alert(getTable(cell).rows[getRowIndex(cell)].innerHTML);
	return getTable(cell).rows[getRowIndex(cell)];
}

 

 

额外学习：

获得select所选项：

var cardTypeGroup_index = cardTypeGroup_selectObj.selectedIndex;
var cardTypeGroupId_select_val = cardTypeGroup_selectObj.options[cardTypeGroup_index].value;

 

补充2：

获得当前已经选定值：

1.获得jsp表格中的值：

serviceSel = editRow.cells[3].innerHTML;

2.

function service_selectOption(){
		var objSelect = document.getElementById("select_service");
		var meta = "local,all,international";
		var datas = meta.split(",");
		if(objSelect.options.length == 1){
			objSelect.options.remove(0);
			for (var i = 0; i < datas.length; i++) {
				objSelect.options.add(new Option(datas[i],datas[i]));
				 if (objSelect.options[i].value == cardTypeGroupNameSel) {
					objSelect.options[i].selected = true;  //设为默认
				}  
			}
		}
	}