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>