BootStrap点击下拉菜单项后显示一个新的输入框实现代码

网络编程 2025/10/27 佚名

3 2 1

我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.

假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框；点击B时显示图像上传框,隐藏文本输入框,请问怎么实现"htmlcode">

<script type="text/javascript">
//image_upload是图片上传框的id,最开始时把它隐藏
$(document).ready( function(){
$("#image_upload").hide();
}
);
//text_only是下拉菜单项,我想这个函数来实现点击这个菜单项时
//显示文本输入框text_input,隐藏图片上传框image_upload
$('#text_only').click(function(e){
$("#text_input").show();
$("#image_upload").hide();
e.stopPropagation();
}
);
/*
image_only是下拉菜单项,点击它时隐藏文本框,显示图片上传框
*/
$('image_only').click(function(){
$("#text_input").hide();
$("#image_upload").show();
});
</script>

完整的代码如下,怕上面的信息还不够:

<!DOCTYPE html>
<html lang="en">
<head>
<title> hello,world</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!--防止中文乱码 -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
<link href="css/bootstrap-fileupload.css" rel="stylesheet" media="screen"> 
<script src="/UploadFiles/2021-04-02/jquery.js">

BootStrap点击下拉菜单项后显示一个新的输入框实现代码，希望对大家有所帮助！

bootstrap下拉菜单,bootstrap输入框