1、使用到jQuery
在html文檔裏引入jQuery庫
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2、html代碼
在html文件裏新建好radio,再新建一個select,設置好option,改變radio的值則select的值也發生改變
<div class="learningType" >
<input type="radio" name="learningType" value="監督學習" style="width: 15px;height: 15px">監督學習
<input type="radio" name="learningType" value="無監督學習" style="width: 15px; height: 15px">無監督學習
</div>
<select id="selector">
<option value="">--請選擇--</option>
<option value="aaa">aaa</option>
<option value="aaa">bbb</option>
<option value="aaa">ccc</option>
<option value="aaa">ddd</option>
<option value="aaa">eee</option>
</select>
3、js代碼
$(document).ready(function(){
$('input[type=radio][name=learningType]').change(function(){
if(this.value=='監督學習'){
option = ['aaa','bbb','ccc','ddd','eee'];
optionTags = '';
for(var i=0;i<option.length;i++){
optionTags += '<option value="'+option[i]+'">'+option[i]+'</option>'
}
//保留第一個option,移除其他的option
$('#selector option:gt(0)').remove();
$('#selector').append(optionTags);
}else if(this.value == "無監督學習"){
option = ['AAA','BBB','CCC','DDD','EEE'];
optionTags = '';
for(var i=0;i<option.length;i++){
optionTags += '<option value="'+option[i]+'">'+option[i]+'</option>'
}
$('#selector option:gt(0)').remove();
$('#selector').append(optionTags);
}
});
});