碼上快樂

相關內容    簡體    繁體

如何在某些情況下禁止提交Select下拉框中的默認值或者第一個值(默認選中的就是第一個值啦……)

本文轉載自   查看原文   2017-05-10 16:24   11337 

群里有個帥哥問了這么個問題，他的下拉框剛進頁面時是隱藏起來的，但是是有值的，為啥呢？因為下拉框默認選中了第一個值唄，，，

所以提交數據的時候就尷尬啦，明明沒有選，但是還是有值滴。怎么辦呢？

一開始看到的時候不是很理解他的意思，提交的時候判斷一下把獲取選中的值賦值為空不就好啦。難道還有什么深意？

不過這樣是不是有點麻煩或者有點太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>

效果圖：

挺好玩de..


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 VUE 單選下拉框Select中動態加載 默認選中第一個 EXT學習之——EXT下拉框默認綁定第一個值 iview下拉框默認選中第一個option 默認選中第一個下拉框 Java easyui 下拉框默認選中第一個 JavaScript獲取select下拉框中的第一個值 jQuery設置下拉框select 默認選中第一個option jquery 純JS設置select下拉框，並默認選中第一個 Vue select默認選中第一個 select下拉框默認不能選擇第一個選項的問題
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM