12

グループ化された sを持つselect要素がありoptionます。がクリックoptionされたoptgroupときに、すべての を選択 (または選択解除) する必要があります。optionまた、一度に複数の を選択できるようにする必要もありますoptgroup。

私がそれを機能させたい方法は次のとおりです。

  • 何も選択されていない場合は、1 つのオプションをクリックして、同じ optgroup 内のすべてのオプションを選択したいと考えています。
  • 1 つ以上の optgroup が既に選択されている場合、別の optgroup の 1 つのオプションをクリックして、代わりにそれらすべてのオプションを選択したいと考えています。
  • 1 つ以上の optgroup が既に選択されている場合、選択されていない optgroup のオプションを Ctrl キーを押しながらクリックして、その optgroup のすべてのオプションも選択できるようにしたいと考えています。
  • 1 つ以上の optgroup が既に選択されている場合、選択した optgroup 内のオプションを Ctrl キーを押しながらクリックして、そのグループ内のすべてのオプションを選択解除できるようにしたいと考えています。

Stack Overflow で他の回答を見て、次のように作成しました。

HTML:

<select multiple="multiple" size="10">
    <optgroup label="Queen">
        <option value="Mercury">Freddie</option>
        <option value="May">Brian</option>
        <option value="Taylor">Roger</option>
        <option value="Deacon">John</option>
    </optgroup>
    <optgroup label="Pink Floyd">
        <option value="Waters">Roger</option>
        <option value="Gilmour">David</option>    
        <option value="Mason">Nick</option>                
        <option value="Wright">Richard</option>
    </optgroup>
</select>

jQuery:

$('select').click(selectSiblings);
function selectSiblings(ev) {
    var clickedOption = $(ev.target);
    var siblings = clickedOption.siblings();
    if (clickedOption.is(":selected")) {
        siblings.attr("selected", "selected");
    } else {
        siblings.removeAttr("selected");
    }
}​

ここで例を作成しました: http://jsfiddle.net/mflodin/Ndkct/ (悲しいことに、jsFiddle は IE8 をサポートしていないようです。)

これは Firefox (16.0) では期待どおりに機能しますが、IE8 ではまったく機能しません。他の回答から、IE8 はまたはのclickイベントを処理できないことがわかりました。これが、イベントを にバインドしてから を使用する理由です。しかし、IE8 では、まだクリックされた ではなく、全体を指しています。どの(または を含む) がクリックされ、選択または選択解除されたかを確認するにはどうすればよいですか?optgroupoptionselect$(ev.target)$(ev.target)selectoptionoptionoptgroup

もう 1 つの予想外の動作ですが、比較するとマイナーですが、Chrome (20.0) では、マウスがselect. 誰かがこれに対する回避策を知っていますか? </p>

4

6 に答える 6

3

選択オプションのクロスブラウザの問題に関する特定の質問に対する回答ではありません。すでに回答されていると思いますが、データを選択してサーバーに戻すという問題の解決策は、マークアップをより適したものに変更することです複数選択

代わりにチェックボックスを使用する場合は、それらをリストに入れ、拡張 js を追加してすべてを選択し、すべてを選択解除することができます

http://jsfiddle.net/Ndkct/43/

<dl>
<dt>Queen</dt>
<dd>
    <ul>
        <li>
            <input id="Mercury" name="bandmembers" value="Mercury" type="checkbox" />
            <label for="Mercury">Freddie</label>
        </li>    
        <li>
            <input id="May" name="bandmembers" value="May" type="checkbox" />
            <label for="May">Brian</label>
        </li>    
        <li>
            <input id="Taylor" name="bandmembers" value="Taylor" type="checkbox" />
            <label for="Taylor">Roger</label>
        </li>    
        <li>
            <input id="Deacon" name="bandmembers" value="Deacon" type="checkbox" />
            <label for="Deacon">John</label>
        </li>    
    </ul>
</dd>
<dt>Pink Floyd</dt> ...

js は十分にシンプルになりました

$("dt")
    .css("cursor","pointer")
    .click(function(){
        var $el = $(this).next();
        var $checks = $el.find(":checkbox");
        if($checks.is(":not(:checked)")){
           $checks.attr("checked",true); 
        }else{
           $checks.attr("checked",false); 
        }
    });

(このフィドルhttp://jsfiddle.net/Ndkct/44/は、より使いやすくするために親チェックボックスを追加します)

于 2013-04-19T09:10:38.727 に答える
2

optgroupバージョン 10 の Internet Explorer は、またはでの有用なイベントをまだサポートしていないため、optionこの問題に対するクロスブラウザー ソリューションは、これらの要素からの直接のイベントに依存することはできません。

注:optgroup MSDN のドキュメントでは、イベントをサポートしていると主張していclickますが、IE 10 の時点ではまだ実現していないようです: http://msdn.microsoft.com/en-us/library/ie/ms535876(v=vs.85) .aspx

Chrome 27、Firefox 20、Safari 6、IE 9、および IE 10 で以下をテストしました (現在、IE 8 にはアクセスできません)。

これはあなたが遊ぶことができる例です: http://jsfiddle.net/potatosalad/Ndkct/38/

// Detect toggle key (toggle selection)
$('select')
    .on('mousedown', function(event) {
        // toggleKey = Command for Mac OS X; Control for others
        var toggleKey = (!event.metaKey && event.ctrlKey && !(/Mac OS/.test(navigator.userAgent))) ? event.ctrlKey : event.metaKey;
        if (toggleKey === true) {
            $(this).data('toggleKey', true);
        }
        $(this).data('_mousedown', true);
    })
    .on('mouseup', function() {
        $(this).data('_mousedown', null);
    });
// Chrome fix for mouseup outside select
$(document).on('mouseup', ':not(select)', function() {
    var $select = $('select');
    if ($select.data('_mousedown') === true) {
        $select.data('_mousedown', null);
        $select.trigger('change');
    }
});

$('select')
    .on('focus',  storeState)
    .on('change', changeState);

function storeState() {
    $(this).data('previousGroup', $('option:selected', this).closest('optgroup'));
    $(this).data('previousVal',   $(this).val());
};

function changeState() {
    var select = this,
        args   = Array.prototype.slice.call(arguments);

    var previousGroup = $(select).data('previousGroup'),
        previousVal   = $(select).data('previousVal');
    var currentGroup  = null,
        currentVal    = $(select).val();

    var selected = $('option:selected', select),
        groups   = selected.closest('optgroup');

    console.log("[change] %o -> %o", previousVal, currentVal);

    if ((previousVal === currentVal) && (groups && groups.length == 1)) {
        // selected options have not changed
        // AND
        // only 1 optgroup is selected
        // -> do nothing
    } else if (currentVal === null || currentVal.length === 0) {
        // zero options selected
        // -> store state and do nothing
        storeState.apply(select, args);
    } else { // a select/deselect change has occurred
        if ($(select).data('toggleKey') === true
            && (previousVal !== null && previousGroup !== null && groups !== null)
            && (previousVal.length > currentVal.length)
            && (previousGroup.length === groups.length)
            && (previousGroup.get(0) === groups.get(0))) {
            // options within the same optgroup have been deselected
            // -> deselect all and store state
            $(select).val(null);
            storeState.apply(select, args);
        } else if (currentVal.length === 1) {
            // single option selected
            // -> use groups
            currentGroup = groups;
        } else if (groups.length === 1) {
            // multiple options selected within same optgroup
            // -> use groups
            currentGroup = groups;
        } else {
            // multiple options selected spanning multiple optgroups
            // -> use last optgroup
            currentGroup = groups.last();
        }
    }

    $(select).data('toggleKey', null);

    if (currentGroup !== null) {
        $('optgroup', select).not(currentGroup).children(':selected').attr('selected', false);
        $(currentGroup).children(':not(:selected)').attr('selected', true);
        storeState.apply(select, args);
    }
};

以前に選択したグループとオプションをselect要素に保存し、どれoptgroupを選択 (または選択解除) するかを決定することによって機能します。

一部の動作は、開発者のニーズに基づいて変更できます。たとえば、複数optionsにまたがる複数を選択する場合optgroups(スクリーンショットのようにクリックして下にドラッグ):

複数の optgroup にまたがる複数のオプションが選択されました

この場合のデフォルトの競合解決は、常に最後の を使用するoptgroupことですが、常に最初のもの、またはoptgroup既に選択されているオプションが最も多い を使用するように変更できます。

于 2013-04-15T19:27:03.907 に答える
0

これで問題が修正されます。initを選択した後にこのコードを追加するだけで済みます。

$( '.chzn-results .group-result' ).each( function () {
    var self      = $( this )
        , options = $( '~li', self )
        , next    = options.filter( '.group-result' ).get( 0 )
    ;
    self.data( 'chzn-options', options.slice( 0, options.index( next ) ) );
} )
.click( function () { 
    $( this ).data( 'chzn-options' ).mouseup()
 } )
.hover( function () { 
    $( this ).data( 'chzn-options' ).addClass( 'highlighted' );
 }, function () { 
    $( this ).data( 'chzn-options' ).removeClass( 'highlighted' );
 } )
.css( { cursor: 'pointer' } )

この修正をgithubに投稿してくれたadriengibratに感謝します：
https ：//github.com/harvesthq/chosen/issues/323

于 2013-02-27T18:31:50.787 に答える
0 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


$(document).ready(function() {
    $('select').click(function(tar) {
        var justClickValue = tar.target.value;

        var selectedGroup = $('option[value="'+justClickValue+'"]').parent();

        if (selectedGroup.hasClass("allSelected")) {
            selectedGroup.removeClass("allSelected");
            $("option").each(function() {
                $(this).removeAttr("selected");
            });
        } else {
            $(".allSelected").removeClass("allSelected");
            selectedGroup.addClass("allSelected");
            $(".allSelected option").each(function() {
                $(this).attr("selected", "selected");
            });
        }
    });
});
于 2013-04-18T08:02:19.877 に答える
-1

これがうまくいくことを願っています 

$("#SelectID").live("click",function() {
var elements = this.options; //or document.getElementById("SelectID").options;
for(var i = 0; i < elements.length; i++){
   if(!elements[i].selected)
    elements[i].selected = true;
}
}
于 2013-02-27T10:52:22.850 に答える
-1

問題に応じて、すべてのオプションを選択/選択解除します。次のコードを試すことができます。役立つ場合があります。

コード：

JavaScript コード:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">


       $(function(){

                $('#allcheck').click(function(){
                var chk=$('#select_option >optgroup > option');
                chk.each(function(){
                  $(this).attr('selected','selected');
            });
   });  
$('#alluncheck').click(function(){

              var chk=$('#select_option >optgroup > option');
              chk.each(function(){
              $(this).removeAttr('selected');
          });
     });});

HTML コード:

       <select multiple="multiple" size="10" id="select_option" name="option_value[]">
          <optgroup label="Queen">
            <option value="Mercury">Freddie</option>
            <option value="May">Brian</option>
            <option value="Taylor">Roger</option>
            <option value="Deacon">John</option>
        </optgroup>
        <optgroup label="Pink Floyd">
            <option value="Waters">Roger</option>
            <option value="Gilmour">David</option>    
            <option value="Mason">Nick</option>                
            <option value="Wright">Richard</option>
       </optgroup>
 </select>
<br>
       <strong>Select&nbsp;&nbsp;<a style="cursor:pointer;" id="allcheck">All</a>
  &nbsp;|&nbsp;<a style="cursor:pointer;"  id="alluncheck">None</a></strong>
于 2013-02-27T09:28:11.843 に答える