經常使用表單操做

時間 2019-12-06

標籤經常使用表單欄目 HTML 简体版

原文原文鏈接

1、select：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="select" value="B" class="select" name="selectName"> <!--<option selected value="">請選擇</option>--> <option value="A" url="http://www.baidu.com">第一個option</option> <option value="B" url="http://www.qq.com">第二個option</option> <!--<option value="B" url="http://www.qq.com" selected = "selected">第二個option</option>--> </select> <select class="select" value="B" name="selectName"> <!--<option selected value="">請選擇</option>--> <option value="C" url="http://www.163.com">第三個option</option> <option value="D" url="http://www.tmall.com">第四個option</option> <!--<option value="B" url="http://www.qq.com" selected = "selected">第二個option</option>--> </select> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> //$("#select").val("B");//設置默認值 //$("#select option:first").prop("selected", 'selected');//默認選中第一項 $("#select").change(function(){ var options=$("#select option:selected"); //獲取選中的項 console.log(options.val()); //拿到選中項的值 console.log(options.text()); //拿到選中項的文本 console.log(options.attr('url')); //拿到選中項的url值 if(options.val()==''){ alert('爲空'); return; } }); //爲Select添加事件，當選擇其中一項時觸發 </script> </body> </html>

如何得到select當前被選中option的值：

一、JavaScript原生的方法javascript

(1)拿到select對象： css

var myselect=document.getElementById(「test」);

(2)拿到選中項的索引：html

var index=myselect.selectedIndex ; // selectedIndex表明的是你所選中項的index

(3)拿到選中項options的value： java

myselect.options[index].value;

(4)拿到選中項options的text： jquery

myselect.options[index].text;

<select id="example" name="selectName"> <option value='1' id="a">項目1</option> <option value='2' id="b">項目2</option> <option value='3' id="c">項目3</option> <option value='4' id="d">項目4</option> <option value='5' id="e">項目5</option> </select> <script type=text/javascript> document.getElementById("example").onchange = function(){ console.log(this.options[this.selectedIndex].value); } </script>

二、jQuery方法（前提是已經加載了jquery庫）app

var options=$(「#test option:selected」); //獲取選中的項

alert(options.val()); //拿到選中項的值

alert(options.text()); //拿到選中項的文本

<select id="example" name="selectName"> <option value='1' id="a">項目1</option> <option value='2' id="b">項目2</option> <option value='3' id="c">項目3</option> <option value='4' id="d">項目4</option> <option value='5' id="e">項目5</option> </select> <script type=text/javascript> $("#example").change(function(){ console.log($("#example option:selected").val()); }) </script>

如何獲取select中的全部值：

一、JavaScript原生的方法：ui

<select id="example"> <option value='1' id="a">項目1</option> <option value='2' id="b">項目2</option> <option value='3' id="c">項目3</option> <option value='4' id="d">項目4</option> <option value='5' id="e">項目5</option> </select> <script type=text/javascript> var example = document.getElementById("example"); var len = example.options.length; for(var i = 0; i<len; i++){ console.log(example.options[i].text); } </script>

二、jQuery方法（前提是已經加載了jquery庫）this

<select id="example" name="selectName"> <option value='1' id="a">項目1</option> <option value='2' id="b">項目2</option> <option value='3' id="c">項目3</option> <option value='4' id="d">項目4</option> <option value='5' id="e">項目5</option> </select> <script type=text/javascript> $("#example option").each(function(){ console.log($(this).val()); }); </script>

設置某項默認被選中：

html中：url

<option selected value="">請選擇</option> <option value="A" url="http://www.baidu.com">第一個option</option> <option value="B" url="http://www.qq.com">第二個option</option> <!--<option value="B" url="http://www.qq.com" selected = "selected">第二個option</option>-->

代碼中：spa

<select id="example" name="selectName"> <option value='1' id="a">項目1</option> <option value='2' id="b">項目2</option> <option value='3' id="c">項目3</option> <option value='4' id="d">項目4</option> <option value='5' id="e">項目5</option> </select> <script type=text/javascript> $("#example").val(1); //document.getElementById("example").value = 3; //$("#select option:first").prop("selected", 'selected');//默認選中第一項 </script>

2、radio：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label><input type="radio" name="sex" value="m" checked>男</label><!-- 設置默認選中 --> <label><input type="radio" name="sex" value="f">女</label> <button onclick="getSelectValue()">get Select</button> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> //第三方按鈕點擊 function getSelectValue(){ var val = $('input[name="sex"]:checked').val(); alert("選中的radio的值是：" + val); } //自身值改變 $('input[type=radio][name=sex]').change(function() { if (this.value == 'm') { alert("我是男性！"); } else if (this.value == 'f') { alert("我是女性！"); } }); //點擊自身 $('input[type=radio][name=sex]').click(function() { if ($(this).is(':checked')) { alert($(this).val() + '被選中！'); } if (this.value == 'm') { alert("我是男性！"); } else if (this.value == 'f') { alert("我是女性！"); } }); </script> </body> </html>

根據值選中radio組中某一項：

<input type="radio" value="1" checked="checked" name="group1" />radio1 <input type="radio" value="2" name="group1" />radio2 <input type="radio" value="3" name="group1" />radio3

var value = "2"; $(":radio[name='group1'][value='" + value + "']").prop("checked", "checked");

3、checkbox：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input class="subject" name='subject' type="checkbox" value="Chinese" id="Chinese" /><label>語文</label> <input class="subject" name='subject' type="checkbox" checked value="Math" id="Math"/><label>數學</label> <input class="subject" name='subject' type="checkbox" checked="checked" value="English"/><label>英語</label> <input class="subject" name='subject' type="checkbox" value="Sport"/><label>體育</label> <button id="button1">get Select</button> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> //判斷checkbox 是否選中 alert($("#Math").is(":checked"));//選中，返回true，沒選中，返回false //設置checkbox爲選中狀態 $("#Chinese").prop("checked",true); //設置checkbox爲不選中狀態 $("#id").prop("checked",false); $(".subject").click(function(){ if($(this).is(":checked")){ alert($(this).val() + '被選中了'); } }); //獲取選中項的值 $("#button1").click(function(){ //$('input:checkbox:checked') 等同於 $('input[type=checkbox]:checked') //意思是選擇被選中的checkbox $.each($('.subject:checked'),function(){ alert("你選了："+ $('.subject:checked').length+"個，其中有："+$(this).val()); }); }); </script> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。