iT邦幫忙

0

[jQuery] 使用jQuery對 select 取得多個項目的 val 和 text

select 下拉式選單可以是單選也可以是多選, jQuery 在取其值時單選比較好處理,這裡對多選的下拉選單如何取值並加以處理做一個範例。

這裡使用 ListBox 來創建一個 select ,其 id 命名為 list_A :

<asp:ListBox ID="list_A" runat="server" SelectionMode="Multiple"></asp:ListBox>

ASP.NET在前端會將 ListBox 直譯為 html 的 select 元件,其 name 和 id 都會在前面加上 ctl00$ContentPlaceHolder1$ 名稱:

<select size="4" name="ctl00$ContentPlaceHolder1$list_A" multiple="multiple" id="ContentPlaceHolder1_list_A" >
	<option value="A1">項目1</option>
	<option value="A2">項目2</option>
	<option value="A3">項目3</option>
</select>

所以 jQuery 用 id*= list_A 取得所有 id 名稱為 list_A 的 select 元件,這裡會取得已選取項目的值,其多個值會自動以逗號做分別,若取得多個已選取項目的文字,需用 each 迴圈式寫法加上逗號處理:

<script>
//多個值會自動以逗號做分別,其項目值例如 A1,A2,A3。
var s_value = $('select[id*=list_A]').val();

//用 each 迴圈式寫法加上逗號處理,其項目文字例如 項目1,項目2,項目3。
var s_name = "";
$("select[id*=list_A]").find(":selected").each(function () {
   s_name = s_name + this.text + ",";
});
</script>

若用下面語法取文字,在多選取項目時,其已選取的項目文字不會自動做逗號分別,例如 項目1項目2項目3。

<script>
var s_name = "";
var s_name = $("select[id*=list_A] :selected").text();
</script>

尚未有邦友留言

立即登入留言