iT邦幫忙

0

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

  • 分享至 

  • xImage
  •  

select 下拉式選單可以是單項選單﹑也可以是多項選單, jQuery 在取 select 下拉式選單的值時,單項選單比較好處理,而這篇文章是對下拉式選單的多項選單(SelectionMode="Multiple")如何取值做一個範例。

首先使用 ASP.NET 的 ListBox 來創建一個 select 選單 ,並且將 id 命名為 list_A :

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ListBox ID="list_A" runat="server" SelectionMode="Multiple">
        <asp:ListItem Value="A1">項目1</asp:ListItem>
        <asp:ListItem Value="A2">項目2</asp:ListItem>
        <asp:ListItem Value="A3">項目3</asp:ListItem>
</asp:ListBox>
</asp:Content>

ASP.NET在前端會將 ListBox 直譯為 html 的 select 元件,若有使用 MasterPage 將 ListBox放在 Content 元件裡,並且 ContentPlaceHolderID="ContentPlaceHolder1", 其 name 和 id 都會在前面加上 ctl00$ContentPlaceHolder1$ 名稱,如下面程式已經直譯為 html 的 select 元件:

<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 來取得 select 元件的多個值,用 $('select[id*=list_A]') 取得所有 id 名稱有 list_A 的 select 元件, $('select[id*=list_A]').val() 會取得 select 項目的值,其值會自動以逗號做區別,若要取得多個已選取(selected)項目的文字,需用 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>

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言