select option标签使用，一个接口名队名若干个方法名。选择接口名之后，显示对应的方法名供选择

//函数功能：一个接口名队名若干个方法名。选择接口名之后，显示对应的方法名供选择

html

   <label class="col-md-3 control-label" for="">接口名</label>
   <div class="col-md-9">
      <select id="iName" name="" class="form-control" size="1">
      </select>
   </div>

    <label class="col-md-3 control-label" for="">方法名</label>
    <div class="col-md-9">
       <select id="mName" name="" class="form-control" size="1">
       </select>
    </div>

js:

var OPC_IData = [
    'IOPCAsyncIO3',
    'IOPCServerList',
];
var OPC_MData = [['Refresh2', 'WRITE', 'READ', 'GetEnable', 'RefreshMaxAge', 'WriteVQT', 'ReadMaxAge', 'Cancel2', 'SetEnable'],
    ['EnumClassesOfCategories', 'GetClassDetails', 'CLSIDFromProgID'],
];
//初始化
function initI_Mname() {
    var optionINameContent = '';
    var optionMNameContent = '';
    var interface_name = '';
    for(var i=0, len=OPC_IData.length; i<len; i++) {
        optionINameContent += '<option value = "'+OPC_IData[i]+'">'+OPC_IData[i]+'</option>';
    }
    $("select#iName").html(optionINameContent);
    interface_name = $("#iName option:selected").val();
    for(var i=0, len=OPC_IData.length; i<len; i++) {
        if(interface_name == OPC_IData[i]){
            for(var j=0, length=OPC_MData[i].length; j<length; j++) {
                optionMNameContent += '<option value= "'+OPC_MData[i][j]+'">'+OPC_MData[i][j]+'</option>';
            }
            $("select#mName").html(optionMNameContent);
        }
    }
}

$("select#iName").change(function () {
    var optionMNameContent = '';
    var interface_name = $(this).children('option:selected').val();
    for(var i=0, len=OPC_IData.length; i<len; i++) {
        if(interface_name == OPC_IData[i]){
            for(var j=0, length=OPC_MData[i].length; j<length; j++) {
                optionMNameContent += '<option value= "'+OPC_MData[i][j]+'">'+OPC_MData[i][j]+'</option>';
            }
            $("select#mName").html(optionMNameContent);
        }
    }
})