根据下拉框的值来改变redio控件的值

最新推荐文章于 2022-04-12 13:05:29 发布

原创最新推荐文章于 2022-04-12 13:05:29 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#radio #select #jquery

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML的Radio按钮与Select下拉菜单相结合的方法来实现用户选择不同角色及其子分类的功能。通过点击Radio按钮触发相关联的Select元素显示，并允许用户进一步选择具体的角色类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：通过redio控件选择一种角色，但每种角色又有几个小的分类，如何实现？

解答：直接通过程序展示。

表单部分代码：

   <div style="display:inline-block">
 	<input type="radio" name="role" value=""   id="zhubo"/><label id="zhubolabel" for="zhubo">主播竞选</label>
 	<select style="display:none" id="select1">
 	    <option>请选择主播：</option>
 	    <option value="zhubo1">主播1</option>
 	    <option value="zhubo2">主播2</option>
        </select>
    </div>
 <div style="display:inline-block">
 	<input type="radio" name="role" value=""   id="taizhang"/><label id="taizhanglabel" for="taizhang">台长竞选</label>
 	<select style="display:none" id="select2">
 		<option>请选择台长：</option>
 		<option value="taizhang1">台长1</option>
 		<option value="taizhag2">台长2</option>
 	</select>
 </div>
<input type="radio" name="role" value="" id="qita"/>其他角色

js代码：

$("input[name=role]").click(function(){
      		    	 var val  = $(this).attr("id");
      		     	if(val =="zhubo"){
      		     		$("#zhubolabel").css({display:"none"});
      		     		$("#select1").css({display:""});
      		     		$("#select1 option:first-child").attr("selected","true");
      		     		$("#select1").change(function(){
      		     			var text = $(this).find("option:selected").text();
      		     			if(!(text=="请选择主播：")){
      		     				$("#zhubolabel").text(text);
      		     				var value = $("#select1").val();
      		     				$("#zhubo").val(value);
      		     				$("#zhubolabel").css({display:""});
      		     				$("#select1").css({display:"none"});
      		     			}
      		     		});
      		     	}else{
      		     			$("#zhubolabel").text("主播竞选");
      		     			$("#zhubo").val("");
      		     			$("#zhubolabel").css({display:""});
      		     			$("#select1").css({display:"none"});
      		     	}
      		     	
      		     	if(val=="taizhang"){
      		     		$("#taizhanglabel").css({display:"none"});
      		     		$("#select2").css({display:""});
      		     		$("#select2 option:first-child").attr("selected","true");
      		     		$("#select2").change(function(){
      		     			var text = $(this).find("option:selected").text();
      		     			if(!(text=="请选择台长：")){
      		     				$("#taizhanglabel").text(text);
      		     				var value = $("#select2").val();
      		     				$("#taizhang").val(value);
      		     				$("#taizhanglabel").css({display:""});
      		     				$("#select2").css({display:"none"});
      		     			}
      		     		});
      		     	}else{
      		     			$("#taizhanglabel").text("台长竞选");
      		     			$("#taizhang").val("");
      		     			$("#taizhanglabel").css({display:""});
      		     			$("#select2").css({display:"none"});
      		     	}
      		     	
      		     	if(val == "qita"){
      		     		$(this).val(val);
      		     	}else{
      		     		$("#qita").val("");
      		     	}
      		     });
      		});

结果：