Jquery 和JS獲取下拉列表的值
阿新 • • 發佈:2019-02-10
一、Javascript獲取下拉列表的選中的文字和值
select option 在前端是經常用到的表單元素,option裡面的值一般是用來和後臺互動的。那麼如何來獲取選中的文字和值呢?
html片段
<div style="width:300px;height:200px;margin:0 auto">
<select name="select" id="fruit" style="width:100px;height:30px;">
<option value="apple">蘋果</option>
<option value="banana">香蕉</option>
<option value="orange">橘子</option>
</select>
<p></p>
</div>
javascript程式碼
var fruit=document.getElementById("fruit");
var option=document.getElementsByTagName("option");
var p=document.getElementsByTagName ("p")[0];
fruit.onchange=function(){
p.innerText="你選擇的水果是"+option[fruit.selectedIndex].innerText+"值為"+
option[fruit.selectedIndex].value;
console.log(option[fruit.selectedIndex]);
}
效果圖:
這邊用到了一個叫做onchang()的方法,當下拉列表的值發生變化時將會觸發事件,把選中的文字和值顯示在p的文字中。通過selectedIndex可以獲取當前option的索引值(看圖中控制檯的輸出),option的innerText屬性獲取文字值,value屬性獲取value值。
二、Jquery獲取下拉列表的選中的文字和值
html片段同上
javascript片段
$(function(){
$("#fruit").change(function(){
value=$("#fruit option:selected").val();
text=$("#fruit option:selected").text();
$("p").text("你選中的是"+text+"值為"+value);
})
})
效果圖:
jquery寫起來就簡潔多了,可以看出來jquery的選擇器好方便。使用text()方法獲取文字值,val()方法獲取value值。注意jquery是沒有value()方法的不要和javascript搞混掉了。
2. 三個簡單實用的用於 DOM 操作的 jQuery 方法:
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素的內容(包括 HTML 標記)
- val() - 設定或返回表單欄位的值
html程式碼:
<div style="width:300px;height:200px;margin:0 auto">
<input type="text" style="height:20px">
<p id="p1">今天"海馬"要來啦~~~<span>長這麼大還沒見過颱風</span></p>
<button class="btn">顯示</button>
<p class="mes1" style="color:red"></p>
<p class="mes2" style="color:blue"></p>
<p class="mes3" style="color:green"></p>
</div>
javascript程式碼:
$(".btn").click(function(){
$(".mes1").text("輸入框的值是:"+$("input").val());
$(".mes2").text("p標籤的文字是:"+$("#p1").text());
$(".mes3").text("p標籤呼叫html()方法:"+$("#p1").html());
})
為了方便,這裡用來三個p標籤來顯示呼叫方法的結果。從圖中看可以看出val()方法主要是獲取value值,text()為對應的文字值相當於js的innerText,html()會把文字值包括子元素的標籤輸出相當於js的innerHTML.
3.一個簡單的小例子
填寫一個form表單,並把表單中的內容顯示出來。
onsubmit=“return false”是為了阻止form表單的提交事件,便於我們在例子中檢視效果。
$(":checkbox:checked").each(function(){
interest.push($(this).val());
})
這段程式碼是用each()方法遍歷選中的多選框,然後把它們的值push到一個叫做interest的陣列中。
在radio設定屬性name為相同的,是為了把幾個radio歸為一組。單選框radio如果name屬性不相同的話,那麼性別中“男”和“女”可以同時選中,顯然這是不合理的。
html程式碼:
<div style="width:300px;height:200px;margin:0 auto">
<form onsubmit="return false">
<fieldset>
<legend><h2>個人資訊</h2></legend>
<h4>基本資訊</h4>
<p>
<label>姓名</label>
<input type="text" id ="name" placeholder="請輸入你的姓名"></p>
<p>
<label>身高</label>
<input type="text" id="high" placeholder="請輸入你的身高"></p>
<p>
<label>體重</label>
<input type="text" id="weight" placeholder="請輸入你的體重"></p>
<h4>性別</h4>
<input type="radio" value="man" name="sex">男
<input type="radio" value="woman" name="sex">女
<h4>興趣</h4>
<input type="checkbox" name="interest" value="basketball">籃球
<input type="checkbox" name="interest" value="climbing">爬山
<input type="checkbox" name="interest" value="swimming">游泳
<input type="checkbox" name="interest" value="eating">吃飯
<button class="btn" style="margin-top:10px">提交</button>
</fieldset>
</form>
<p class="mes"></p>
</div>
javascript程式碼:
$(".btn").click(function(){
var interest=[];
name=$("#name").val()
high= $("#high").val();
weight=$("#weight").val();
sex=$("input:radio:checked").val();
$(":checkbox:checked").each(function(){
interest.push($(this).val());
})
$(".mes").text(name+"性別:"+sex+"。身高為:"+high+"。體重為:"+weight+"。興趣:"+interest);
})