定义两个select框,每个框都通过从数据库读取数据来改变下拉选项的文字。
给第一个select框定义一个onchange事件,当选定内容有变化时触发该函数。
该函数根据获取第一个下拉框的值刷新第二个select框的下拉选项的值。
简单的实现如下:
定义两个下拉框,其中第一个下拉框定义了一个onchange事件,该事件触发ChangeTextNo()函数;
<select id="selectTest" onchange="ChangeTextNo()">
<option value="0">--请选择考试名称--</option>
</select>
<select id="selectNo">
<option value="0">--请选择考试次数--</option>
</select>
ChangeTextNo函数如下:
function ChangeTextNo(){
var index = $('#selectTest option:selected').text();
var optionJson=[];
$.ajax({
type: "post",
url: "/getTestNo",
data: {"name":index},
async: false,
success: function(data){
optionJson = data;
var selectObj=document.getElementById("selectNo");
selectObj.options.length=0;
selectObj.options.add(new Option("请选择考试次数",0));
for(var i=0;i<optionJson.length;i++){
selectObj.add(new Option(optionJson[i],i+1));
最终该代码实现如下效果:
获取select选择框填充内容的方法请参考:http://www.cnblogs.com/liesun/p/7416969.html
请dalao不吝赐教。