【js】改变radio的值动态改变下拉框（select）的值

太过爱你忘了你带给我的痛 2023-02-10 05:20 50阅读 0赞

#### 1、使用到jQuery ####

在html文档里引入jQuery库

#### 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);
    		}
    	});
    });