3

私は Javascript/Jquery を使用するのに非常に慣れていないため、読んでいただき、単純な問題である可能性が高いことをご理解いただき、ありがとうございます。これは少し多層的な質問なので、説明させてください。

データバインドされた ASP リストボックスがいくつかあります。リストボックスごとに1つずつ、いくつかのチェックボックスもあります。Javascriptを使用してチェックボックスを配線し、クリック時にすべてのリストボックス項目を選択または選択解除します。

私の目標は、チェックボックスとそれに対応するリストボックスを javascript メソッドに渡し、リストボックス内のすべてを選択または選択解除する単一のメソッドを構築することでした。これは C# で非常に簡単に行うことができますが、ページが既に遅く複雑であるため、ポストバックを使用することはできません。

したがって、これはすでに Javascript で動作します (この下に私のコードを投稿します)。それらすべてをスクロールして、それらすべてを選択します。Chrome にはこの問題はなく、Firefox は少なくともはるかに高速ですが、IE は 75% 以上のお客様が使用しているブラウザーです。

ASP:

<asp:ListBox ID="StatusListBx" runat="server" DataSourceID="StatusLds" 
    DataTextField="Status" DataValueField="StatusID"  Width="140px" Height="55px" AppendDataBoundItems="true"
    SelectionMode="Multiple"/> 
<asp:LinqDataSource ID="StatusLds" runat="server" 
    ContextTypeName="ElementDataConnector.ElementDBDataContext" 
    Select="new (StatusID, Status)" Where="StatusID < 4" TableName="Lookup_Status" >
</asp:LinqDataSource>
<br />
<asp:CheckBox id="SelectAllProjectStatusChkbx" runat="server" Text="Select All" />

C#:

protected void Page_Load(object sender, EventArgs e)
{
    SelectAllProjectStatusChkbx.Attributes.Add("onclick", "selectDeselect(" + StatusListBx.ClientID + ",this)");
}

Javascript:

function selectDeselect(listbox, checkbox) {
    if (checkbox.checked) {
        var multi = document.getElementById(listbox.id);
        for (var i = 0; i < multi.options.length; i++) {
            multi.options[i].selected = true;
        }
    } else {
        var multi = document.getElementById(listbox.id);
        multi.selectedIndex = -1;
    }
}

(適用可能なリストボックス/チェックボックスの組み合わせごとにこれを複製しました - これはスケーラブルなタスクです)

実際の質問に：

  1. この機能に Javascript ではなく JQuery を使用した場合、その「スクロール/選択」効果全体を回避できますか?

  2. そのスクロール効果を回避できる場合、リストボックス/チェックボックスの組み合わせごとにカスタムメソッドを記述するのではなく、リストボックスを動的に JQuery に渡すにはどうすればよいですか?

読んでいただきありがとうございます。提供されたヘルプに感謝します。

4

2 に答える 2

9

この投稿をチェックしてください：

http://www.craiglotter.co.za/2010/02/26/jquery-select-all-options-in-a-multiple-select-listbox/

jQuery: 複数選択リストボックスですべてのオプションを選択する

$("#multipleselect option").prop("selected",true);

すべてがすでに選択されている複数選択リストボックス！

于 2014-04-03T16:57:02.340 に答える
4

あなたが言及しているスクロール効果をチェックするためのIEは手元にありませんが、テストするのは簡単です。selectDeselect 関数を保持することもできますが、次のように変更される可能性があります (jQuery ~ 1.7.2+ を想定):

function selectDeselect(listbox, checkbox) {
    var select_all = $(checkbox).prop('checked') ? true : false;
    var select = $(listbox);
    $('option', select).prop('selected', select_all);
}

jQuery以外のコードの方が速いと思いますが、試してみてください...

編集： IEでも上記は遅いです。

私はこの方法のファンではありませんが、選択ドロップダウンで実際の HTML を置き換えてみてください。何かのようなもの：

function selectDeselect(listbox, checkbox) {
    var select_all = $(checkbox).prop('checked') ? true : false;        
    var select = $(listbox);    
    if (select_all) {
        var clone = select.clone();
        $('option', clone).attr('selected', select_all);
        var html = clone.html();
        select.html(html);
    }
    else $('option', select).removeAttr('selected');    
}

IE9 で動作するようです: jsfiddle

于 2013-03-05T20:00:26.127 に答える