如何在某些情况下禁止提交Select下拉框中的默认值或者第一个值(默认选中的就是第一个值啦……)

时间：2022-04-12 09:07:52

群里有个帅哥问了这么个问题，他的下拉框刚进页面时是隐藏起来的，但是是有值的，为啥呢？因为下拉框默认选中了第一个值呗，，，

所以提交数据的时候就尴尬啦，明明没有选，但是还是有值滴。怎么办呢？

一开始看到的时候不是很理解他的意思，提交的时候判断一下把获取选中的值赋值为空不就好啦。难道还有什么深意？

不过这样是不是有点麻烦或者有点太low啊，想着的时候，群里的大神来了一句设置属性disabled=true就可以了。

许久不看jq,许久没用下拉框，连长什么样子都记不清楚了，哪里敢乱说误人子弟，看到大神这样提一句，想着这样好像更简洁一点哎。

但是实在是记不清楚了这个用法了哎，真悲催，这脑子，赶紧打开电脑恶补一番吧，，

问题需求：

当刚进入页面没点按钮的时候下拉框是隐藏的，然后设置默认属性disabled="disabled"，禁用此元素，当然也会禁用里面的值，这个时候如果直接提交的话，不会把默认的值给带过去，然后点击按钮显示下拉框的时候，把select元素的disabled属性变为false,表示启用该元素，就可以选择值，进行传值啦。问题解决，如此简单。

不过我想的那样其实也是可以的。。

手贱啦，怎么着都想实现一下看看，然后写了几句，，

按照大神看法：

1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

	String path = request.getContextPath();

	String basePath = request.getScheme() + "://"

			+ request.getServerName() + ":" + request.getServerPort()

			+ path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '1.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(

		function(){

			$(document).bind("click",function(e){

				//如果点击的不是显示按钮和选择框，就执行隐藏方法

				if($(e.target).closest("#testSelect").length==0&&

						$(e.target).closest("#xianshi").length==0&&

						  $(e.target).closest("#tijiao").length==0){

		                        //隐藏节点

					$("#testSelect").hide();

					//改变节点属性

					$("#testSelect").prop("disabled",true);

				}

			}

			);

			$("#xianshi").click(

			function(){

				$("#testSelect").show();

				$("#testSelect").attr("disabled",false);

			}

			);

		}

		);

function myFunction(){

   $("#myForm").submit();

}

</script>

</head>

<body>

<form id="myForm" action="2.jsp" method="get">

    <p id="xianshi">点击选择！</p>

	<select id="testSelect" name="se" style="display:none;" disabled="disabled">

		<option value="volvo">Volvo</option>

		<option value="saab">Saab</option>

		<option value="opel">Opel</option>

		<option value="audi">Audi</option>

	</select>

	<input id="tijiao" type="button" value="提交" onclick="myFunction()" />

</form>

</body>

</html>

按照我之前看法：

1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP '1.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(

		function(){
                        //绑定一个点击事件

			$(document).bind("click",function(e){

				//如果点击的不是显示按钮和选择框，就执行隐藏方法

				if($(e.target).closest("#testSelect").length==0&&

						$(e.target).closest("#xianshi").length==0&&

						  $(e.target).closest("#tijiao").length==0){

		                        //隐藏节点

					$("#testSelect").hide();

				}

			}

			);

			$("#xianshi").click(

			function(){

				$("#testSelect").show();

			}

			);

		}

		);

function myFunction(){

    check();

    $("#myForm").submit();

}

function check(){

	if($("#testSelect").css("display")=="none"){

		$("#testSelect").val(null);

	}

}

</script>

</head>

<body>

<form id="myForm" action="2.jsp" method="get">

    <p id="xianshi">点击选择！</p>

	<select id="testSelect" name="se" style="display:none;">

		<option value="volvo">Volvo</option>

		<option value="saab">Saab</option>

		<option value="opel">Opel</option>

		<option value="audi">Audi</option>

	</select>

	<input id="tijiao" type="button" value="提交" onclick="myFunction()" />

</form>

</body>

</html>

2.jsp

<body>

    <%

    String name=request.getParameter("se");

    out.print("值为：  "+name);

    %>

</body>

　　

效果看着是一样的啦，不过还是用更改属性值的方法吧，相对简便又保险一点。。

老是在原生js里逛，jq都快忘光啦，菜鸟一枚，大神们有什么好的学习方法，请多多赐教啊，，

不写啦，喝口水去。。

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 分割线 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

又加了点东西，添上来，留个纪念：

按大神思路实现：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(

        function(){

            //设置默认属性值

            $(".ele").prop("disabled",true);

            //在dom上绑定一个点击事件

            $(document).bind("click",function(e){

                //如果点击的不是显示按钮和选择框，就执行隐藏方法

                if($(e.target).closest("#myDiv").length==0&&

                        $(e.target).closest("#xianshi").length==0&&

                          $(e.target).closest("#tijiao").length==0){

                    //隐藏节点

                    $("#myDiv").hide();

                    //改变节点属性

                    $(".ele").prop("disabled",true);

                }

            }

            );

            //点击显示按钮

            $("#xianshi").click(

            function(){

                $("#myDiv").show();

                $(".ele").attr("disabled",false);

            }

            );

        }

        );

function myFunction(){

   $("#myForm").submit();

}

</script>

</head>

<body>

<form id="myForm" action="2.jsp" method="get">

    <p id="xianshi">点击选择！</p>

    <div id="myDiv" style="display:none;" >

    <select id="testSelect" name="se"  class="ele">

        <option value="volvo">Volvo</option>

        <option value="saab">Saab</option>

        <option value="opel">Opel</option>

        <option value="audi">Audi</option>

    </select>

    <input type="checkBox" name="checkBox" checked="checked" value="足球" class="ele"/>足球

    <input type="checkBox" name="checkBox" value="篮球" class="ele"/>篮球

    <input type="checkBox" name="checkBox" value="排球" class="ele"/>排球

    <input type="radio" name="radio" checked="checked" value="男" class="ele"/>男

    <input type="radio" name="radio" value="女" class="ele"/>女

    </div>

    <br/>

    <input id="tijiao" type="button" value="提交" onclick="myFunction()" />

</form>

</body>

按我的思路实现：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(

        function(){

            //绑定一个点击事件

            $(document).bind("click",function(e){

                //如果点击的不是显示按钮和选择框，就执行隐藏方法

                if($(e.target).closest("#myDiv").length==0&&

                        $(e.target).closest("#xianshi").length==0&&

                          $(e.target).closest("#tijiao").length==0){

                    //隐藏节点

                    $("#myDiv").hide();

                }

            }

            );

            //点击显示按钮

            $("#xianshi").click(

            function(){

                $("#myDiv").show();

            }

            );

        }

        );

function myFunction(){

    check();

    $("#myForm").submit();

}

function check(){

    if($("#myDiv").css("display")=="none"){

        $(".ele").val(null);

    }

}

</script>

</head>

<body>

<form id="myForm" action="2.jsp" method="get">

    <p id="xianshi">点击选择！</p>

    <div id="myDiv" style="display:none;" >

    <select id="testSelect" name="se"  class="ele">

        <option value="volvo">Volvo</option>

        <option value="saab">Saab</option>

        <option value="opel">Opel</option>

        <option value="audi">Audi</option>

    </select>

    <input type="checkBox" name="checkBox" checked="checked" value="足球" class="ele"/>足球

    <input type="checkBox" name="checkBox" value="篮球" class="ele"/>篮球

    <input type="checkBox" name="checkBox" value="排球" class="ele"/>排球

    <input type="radio" name="radio" checked="checked" value="男" class="ele"/>男

    <input type="radio" name="radio" value="女" class="ele"/>女

    </div>

    <br/>

    <input id="tijiao" type="button" value="提交" onclick="myFunction()" />

</form>

</body>

2.jsp

<body>

    <%

    String se=request.getParameter("se");

    String radio=request.getParameter("radio");

    String[] checkBox=request.getParameterValues("checkBox");

    String str="";

    if(checkBox!=null){

        for(String s : checkBox){

          str+=s+" ";

        }

    }

    out.print("下拉框值为：  "+se+"<br/>");

    out.print("多选框值为：  "+str+"<br/>");

    out.print("单选框值为：  "+radio+"<br/>");

    %>

  </body>

效果图：

如何在某些情况下禁止提交Select下拉框中的默认值或者第一个值(默认选中的就是第一个值啦……)

挺好玩de..

相关文章