select与option：实现表单对应显示和对应显隐

最新推荐文章于 2024-07-01 09:22:48 发布
最新推荐文章于 2024-07-01 09:22:48 发布
阅读量1k 收藏
点赞数
分类专栏： Web开发 文章标签： function generator javascript asp.net html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cypakoo/article/details/7190341
版权

一、表单对应显示

部分效果图：

代码实现：定义方法，通过if判断语句分项显示
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>表单对应显示</title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
     <script type="text/javascript" language="javascript">
         $(function(){
             
             $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange);
             $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange);
         });
    
         
         var eDropLangChange = function(){
         
             var selectedValue = $(this).val();
            

            $("#dropFrame").children("span").each(function(){
                $(this).children().clone().replaceAll($(this));         
            });
            
           
            if(parseInt(selectedValue) != 0){       
                 
                $("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
                     $(this).wrap("<span style='display:none'></span>");
                });
             }
       };
        
         
        var eDropFrameChange = function(){
             
             $("#dropLang").val($(this).children("option:selected").attr("parentid"));
         };
     </script>
 </head>
 <body>
     <div>
         <select id="dropLang">
            <option selected="selected" value="0">&lt;请选择&gt;</option>
             <option value="1">Javascript</option>
             <option value="2">Java</option>
             <option value="3">C#</option>
         </select>
         <select id="dropFrame">
             <option selected="selected" value="0">&lt;请选择&gt;</option>
             <option value="1" parentid="1">JQuery</option>
             <option value="2" parentid="1">Prototype</option>
             <option value="3" parentid="2">Struts</option>
             <option value="4" parentid="2">Spring</option>
             <option value="5" parentid="2">Velocity</option>
             <option value="6" parentid="2">Hibernate</option>
             <option value="7" parentid="3">ASP.NET MVC</option>
             <option value="8" parentid="3">Castle</option>
        </select>
    </div>
</body>
</html>

二、表单对应显隐

部分效果图：

代码实现：定义对应获取id，判断value值，再显隐
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="majianan">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<script>
var sname = [];
sname.push('s1');
sname.push('s2');
sname.push('s3');
sname.push('s4');
function setselect(obj){
    var flag = false;
    for(var i=0;i<sname.length;i++){
        if(sname[i]==obj){
            if(document.getElementById(sname[i]).value==3 || document.getElementById(sname[i]).value==4){
                flag = true;
            }            
        }else{
            continue;
        }
    }

    if(flag){
        for(var i=0;i<sname.length;i++){
            if(sname[i]==obj) continue;
            else{
                document.getElementById(sname[i]).disabled = true;
            }
        }
    }else{
        for(var i=0;i<sname.length;i++){
            document.getElementById(sname[i]).disabled = false;
        }
    }
}
</script>
 </HEAD>

 <BODY>
  <SELECT id='s1' onChange="setselect(this.id);">
    <option value='1'>自考</option>
    <option value='2'>成考</option>
    <option value='3'>四级英语</option>
    <option value='4'>计算机等级</option>
  </SELECT>
  <SELECT id='s2' onChange="setselect(this.id);">
    <option value='1'>op1</option>
    <option value='2'>op2</option>
    <option value='3'>op3</option>
    <option value='4'>op4</option>
  </SELECT>
    <SELECT id='s3' onChange="setselect(this.id);">
    <option value='1'>op1</option>
    <option value='2'>op2</option>
    <option value='3'>op3</option>
    <option value='4'>op4</option>
  </SELECT>
    <SELECT id='s4' onChange="setselect(this.id);">
    <option value='1'>op1</option>
    <option value='2'>op2</option>
    <option value='3'>op3</option>
    <option value='4'>op4</option>
  </SELECT>
 </BODY>
</HTML>



ant design Form 组件总结 结合Modal 自定义Modal的实现 （Upload Input Select DatePicker Cascader）
cuandeqin2083的博客
04-28 3033
起源 最近在项目中发现要写多个弹框（用于查看、编辑、新建XX信息），如下图。 像这样花里胡哨的弹框在一个大型的中台管理系统中，可能要写上好几遍的Modal 但是其实他们大同小异。 首先，他们的title是固定的（增、改、查） 底下的内容也是固定的，无非就是Upload Input Select DatePicker Cascader （写不了<>。其实应该是ant design 的组...
avue-design-form自定义表单目录说明
weixin_38194239的博客
07-28 3855
项目引入avue-from-design 自定义属性 1、在components中引入全部文件 修改了history.js 和custom的文件引入问题 github地址：https://github.com/sscfaith/avue-form-design 2、安装高德地图 安装（指定版本）： npm install monaco-editor@0.22.3 使用说明：https://www.yuque.com/zhengrenzhe/blog/yqz7hp 在public中index.html 中
html <select> <option> 实现根据选择不同的option，调用不同的方法功能
weixin_34179968的博客
02-21 980
<select id="select" data-role="none"> <option gid="1" value="1" selected>Take Photo</option> <option gid="0" value="0">Choose exist image</option&gt...
js控制select选中显示不同表单内容
weixin_43862596的博客
03-09 753
获取select 选中的option的值: $("#ddlRegType").find(“option:selected”).val(); 获取select 选中的 text : $("#ddlRegType").find(“option:selected”).text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select
根据select下拉框选择的值，向form表单添加所要显示的内容的方法
l513655267的博客
04-25 6794
form表单                  跟单结果                              <select name="Ext_WithResult" id="Ext_WithResult" onchange="change(this)" class="select Regional">  //绑定onchange操作
HTML-DOM常用对象的用法（select/option/form/table）
weixin_30872789的博客
04-03 99
HTML DOM 常用对象: 它对常用HTML元素操作的简化。 Select对象 它代表页面上的一个select元素，常用属性有： select.value ——当前选中项的value ，没有value，就返回选中项的内容。 select.options ——保存select下所有option元素对象，相当于: select.getElementsByTagName...
【vue avue】初始化代码 和 增删改查
qq_45852108的博客
07-01 890
【vue avue】初始化代码 和 增删改查
<u-modal :ref="`senPi`" :size="`huge`" :is-heading-slot-empty="true"> <template #title> <u-text :text="`报价详情`"></u-text> </template> <template #body> <u-linear-layout direction="vertical" wrap> <u-form :layout="`inline`" key="form_13"> <u-form-item :layout="`center`"> <template #label> <u-text :text="`供应商id`"></u-text> </template> <u-select :clearable="true" :placeholder="`请选择供应商id`" :dataSource="__select_20_handleDataSourceLoad()" :pageSize="50" :textField="`supplier.name`" :valueField="`supplier.name`" :pagination="true" :value.sync="filter2.supplierId" :emptyValueIsNull="true" key="select_20" > <template #option="current"></template> <template #renderFooter></template> </u-select> </u-form-item> <u-form-item :layout="`center`"> <template #label> <u-text :text="`最终供应商`"></u-text> </template> <u-select :clearable="true" :value.sync="filter2.finalSupplier" :placeholder="`请选择最终供应商`" :dataSource="$utils['EnumToList']({ concept: 'TypeAnnotation', typeKind: 'reference', typeNamespace: 'app.enums', typeName: 'Is_Final_Supplier', inferred: false, ruleMap: {}, typeArguments: [] })" :emptyValueIsNull="true" key="select_22" > <template #option="current"></template> <template #renderFooter></template> </u-select> </u-form-item> <u-form-item :layout="`center`" :labelSize="`auto`"> <u-button :color="`primary`" :text="`查 询`" @click="onQueryClick($event)"></u-button> </u-form-item> </u-form> <!-- 树形表格，支持折叠子表 --> <el-table :data="treeData" row-key="id" :tree-props="{ children: 'quotedPrices', hasChildren: 'hasChildren' }" border style="--cw-style-font-size: 10px; font-size: 10px; --table-view-th-padding: 1px; --table-view-td-padding: 1px; --table-cell-padding: 0px" > <!-- 展开列 --> <el-table-column type="expand" label="展开" width="50" :expandable="(row) => Array.isArray(row.quotedPrices) && row.quotedPrices.length > 0" :expanded="(row) => row.isExpanded" @expand-change="handleExpandChange" ></el-table-column> <el-table-column prop="materialApplyId" label="物料申请单id" width="150"></el-table-column> <el-table-column prop="supplierId" label="供应商id" width="150"></el-table-column> <el-table-column prop="finalSupplier" label="最终供应商" width="150"></el-table-column> <!-- 子表格：报价详情 --> <el-table-column label="报价详情" width="300"> <template #default="scope"> <el-table v-if="Array.isArray(scope.row.quotedPrices) && scope.row.quotedPrices.length > 0" :data="scope.row.quotedPrices" style="width: 100%; font-size: 10px;" border > <el-table-column prop="times" label="报价次数" width="100"></el-table-column> <el-table-column prop="price" label="报价价格" width="100"></el-table-column> <el-table-column prop="lastPrice" label="是否最终报价" width="100"></el-table-column> </el-table> </template> </el-table-column> </el-table> </u-linear-layout> </template> </u-modal>
03-12
首先，我会先通读整个代码，了解这是一个模态框组件，内部包含表单和表格，用于展示报价详情。 首先，注意到用户使用了`<u-modal>`组件，这个组件引用了`senPi`，尺寸设置为huge，并且标题部分使用了插槽。标题是...
若依分离版怎么实现登录页面角色按钮的选择
最新发布
03-31
代码生成模块可能能帮助生成相关的后端代码，比如根据数据库中的角色表生成对应的控制器和服务层代码。此外，数据表可能需要添加角色字段，或者在用户角色关联表中增加相应的记录。 还需要考虑安全性，确保角色选择...
页select中如何实现选择option其中一个选项，显示相关的内容
12-27
调的是新闻列表 然后select内的列表为标题列表 然后你要选中标题显示内容 那么内容区域先定义出来 然后select的option的value给你新闻的标题 在内容区域里也把所有列表调出来(两边的sql语句一致) 比如 <select <option value='1'>第一条新闻标题</option> <option value='2'>第二条新闻标题</option> </select> <div id='info_box'> <div id='Cont_1'>第一条新闻内容</div> <div id='Cont_2'>第二条新闻内容</div> </div> CSS样式写 #info_box div { display:none; } js函数: function ShowInfo(Id){ document.getElementById("Cont_"+Id).style.display="block" } 大概就是这样了,手写的,可能有误 还有就是JS一定要在页面内你select和div内容区域代码的后面 不然加载到以后执行的时候很有可能就提示找不到对象
select标签下option标签的value属性的作用；form表单的注意事项
2301_77058215的博客
11-21 1784
你要获得用户的输入，就不用写value属性。method属性，表示form表单的内容是以什么方式提交，method属性若是不写的话，默认以get方式提交在form表单中，当标签有了name属性，那么该标签的value值才会被submit提交走，而通常标签的value值是用户的输入。当标签没有name属性的时候，该标签的值就不会被提交。
前端开发日记之表单验证中的select、option标签
jiang_mingyi的博客
10-12 3864
各种表单验证的框架在判断select是否选值时，判断的基本上都是option的value属性。而html代码中select的第一个option基本上都是“请选择”，但是在表单判定时“请选择”是没有选值的。所以请选择中的value一定要等于空值，不然表单验证的时候就认为select是选择了值得。 本次遇到这种情况，我们的源码写的是请选择，所以验证一直有问题，表示呵呵哒。。。。
javascript select option对象总结
习惯在马桶上思考
12-20 882
一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在标签中创建一个或多个文本 //options是个数组,里面可以存放多个文本这样的标签 1:options[ ]数组的属性: length属性--------...
根据select选项，显示不同的表单，进而提交显示的数据
Alfred的博客
04-27 6880
最近公司在做项目的过程中，出现表单中，需要根据select的不同选项，进而显示不同的不同的input选项，同时，提交的时候，只提交当时显示的input数据。整理了下思路来解决这个问题。    首先，表单中的input选项，不管是display：none；还是hidden，点击表单中的button按钮时，都会提交上去。jQuery的serialize()方法也是不管是display：none还是h
select 根据某个特定的值去匹配option的value从而选中该option
路漫漫其修远兮
08-11 1万+
今天做修改功能的时候，因为表单中存在select下拉框，要根据后台传过来的值去指定下拉框应该显示的内容。 实现原理： 为option添加selected属性则下拉框便显示的该option。 思路： 1.拿到所有的option 2.遍历option的value并与后台拿到的值进行比较（相同则显示该option） 代码实现： var numbers = $("#menuEditIsme...
form表单如何传select里选中的值给服务器？
热门推荐
cc1969281777的博客
10-24 1万+
&lt;form&gt; &lt;select name="TypeName"&gt; &lt;option selected="selected"&gt;==请选择==&lt;/option&gt; &lt;option value="医药制造业"&gt;医药制造业&lt;/option&gt; &lt
5.用JQuery实现选中select里面的option显示对应的div
dengling6509的博客
01-10 510
用JQuery实现选中select里面的option显示对应的div HTML： <select name="" onchange="select(this)"> 　　<option value="1">题目一</option> 　　<op...
javascript 根据select所选项的不同显示和隐藏部分内容
王伟峰
03-31 4288
<br /><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><title>无标题文档</title><br /><style type="text/css"><br /><!--<br />body,td,th {<br /> font-size: 12px;<br />}<br />--><br /></style><br /><script la
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值