【js】改變radio的值動態改變下拉框(select)的值

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);
		}
	});
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章