工作時會用到，所以集結資料筆記一下，方便查詢
範例 html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>select option</title>
</head>
<body>
<select id="select" name="items">
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<div id="show" />
</body>
</html>
1. 取得選擇項目的文字與值
/*----- 單選 -----*/
// 取得被選擇項目的文字
$("#select").find(":selected").text();
$("#select").find(":selected").prop("text");
// 取得被選擇項目的值
$("#select").find(":selected").val();
$("#select").find(":selected").prop("value");
/*----- 多選 -----*/
// 使用迴圈取得所有被選擇的項目
$("#select").find(":selected").each(function() {
alert(this.text); // 文字
alert(this.value); // 值
});
2. 增加項目
$("#select").append($("<option></option>").attr("value", "值").text("文字"));
$("#select").append($("<option></option>").prop("value", "值").text("文字"));
// 產生 Option 項目
function GetOption(text, value) {
return "<option value = '" + value + "'>" + text + "</option>"
}
3. 移除選擇的項目
// 移除選擇的項目
$("#select").find(":selected").remove();
// 移除全部的項目
$("#select option").remove();
4. 移除選擇項目後，防止捲軸移到最上面
// 先取得要移除項目的 index
var selectIndex = $("#select").find(":selected").index();
// 移除選擇的項目
$("#select").find(":selected").remove();
// 判斷移除項目後，原先的index是否還有option，有的話就直接將此option設定為選取狀態
// 捲軸就不會往上跑了
if ($('#select option').get(selectIndex) != null) {
$('#select option').get(selectIndex).selected = true;
}
else {
// 沒有項目的話，判斷select理是否還有option
// 有的話，表示移除的項目為最後一個，就設定上一個option為選取狀態
if ($('#select option').length > 0) {
$('#select option').get(selectIndex - 1).selected = true;
}
}
5.Select改變時的事件
$("#select").change(function(){
$("option:selected",this).each(function(){
alert(this.value);
});
});
6.取得index
$("#select").find(":selected").index();
7.取得option 長度
$("#select option").length;
8.取得在Select中最後一個的index
$("#select option:last").index();
9.取得某一特定的值 => eq(第幾個)
$("#select option").eq(2).val();
10.設定某一option 為 selected
$("#select option").eq(2).prop("selected",true);
Ref:
JQuery對select的操作[完整版] => http://goo.gl/CSbZ7g
[jQuery]使用jQuery對 select 的操作 => http://goo.gl/MTwlWo
Jquery Select操作方法集合脚本之家特别版 => http://goo.gl/OuFQW2
工具：
線上 JS 操作練習 => http://jsbin.com
小範例：
select Option 的新增
【畫面】
【CODE】
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>測試</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<input type="button" id="demo" value = "Demo" /><br />
<select id="mySelect"></select>
<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var fruits = new Array();
fruits[0] = { Text: "Mango", Value: "1" };
fruits[1] = { Text: "Banana", Value: "2" };
fruits[2] = { Text: "Orange", Value: "3" };
fruits[3] = { Text: "Grapes", Value: "4" };
$("#demo").live("click", function () {
//Clear the HTML Select DropdownList
$("#mySelect option").remove();
//Add Default Option
$("#mySelect").append(GetOption("Please select fruit", "0"));
//Loop through array and add options
$.each(fruits, function (index) {
$("#mySelect").append(GetOption(fruits[index].Text, fruits[index].Value));
});
});
function GetOption(text, value) {
return "<option value = '" + value + "'>" + text + "</option>"
}
</script>
</body>
</html>
兩個 select option 的新增與移除，點選 <> 按鈕將兩邊資料互換
【畫面】
【CODE】
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>測試</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var items = new Array();
items[0] ={Text: "一", Value: "1"};
items[1] ={Text: "二", Value: "2"};
items[2] ={Text: "三", Value: "3"};
items[3] ={Text: "四", Value: "4"};
items[4] ={Text: "五", Value: "5"};
$(function(){
$("#changeOption").click(function(){
var selected1 = $("select[name=list_box1]");
var selected2 = $("select[name=list_box2]");
var selectedVal1 = $(selected1).find(":selected").val();
var selectedVal2 = $(selected2).find(":selected").val();
var selectedText1 = $(selected1).find(":selected").text();
var selectedText2 = $(selected2).find(":selected").text();
if(selectedVal1 != "" && selectedVal1 != undefined){
$(selected2).append(GetOption(selectedText1,selectedVal1));
selected1.find(":selected").remove();
}
if(selectedVal2 != "" && selectedVal2 != undefined){
$(selected1).append(GetOption(selectedText2,selectedVal2));
selected2.find(":selected").remove();
}
});
$("#showButton").click(function(){
var selected1 = $("select[name=list_box1]");
var selected2 = $("select[name=list_box2]");
var showP1 = $("#showP1");
var showP2 = $("#showP2");
show(selected1,showP1);
show(selected2,showP2);
});
$("#reset").click(function(){
var selected1 = $("select[name=list_box1]");
var selected2 = $("select[name=list_box2]");
$(selected1).find("option").remove();
$(selected2).find("option").remove();
$.each(items, function(index){
$(selected1).append(GetOption(items[index].Text, items[index].Value));
});
});
});
function show(SelectOption , showObject){
var selected = SelectOption;
var showP = showObject;
var showText ="";
$(selected).find("option").each(function(){
showText = showText + this.value + ",";
});
if(showText.lastIndexOf(",") > -1){
showText = showText.substr(0,showText.length-1);
}
$(showP).html(showText);
}
function GetOption(text, value) {
return "<option value = '" + value + "'>" + text + "</option>"
}
</script>
</head>
<body>
<div>
<select name="list_box1" size="5">
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option value="4">四</option>
<option value="5">五</option>
</select>
<input id="changeOption" type="button" value="< >">
<select name="list_box2" size="5">
</select>
<br>
<input id="showButton" type="button" value="顯示 Option" />
<input id="reset" type="button" value="重置" />
<br>
<p>Option1的值</p>
<p id="showP1"/>
<p>Option2的值</p>
<p id="showP2"/>
</div>
</body>
</html>
沒有留言 :
張貼留言