8

selectボックスにカーソルを合わせると、クリックしたかのようにボックスが自動的に開くようにしようとしています。これは可能ですか？

私はjQueryでこれを簡単に行うことができると思います...

$("#settings-select").mouseover(
    function(){
        $(this).trigger("click");
    }
);

しかし、それは何もしません。何か案は？

4

6 に答える 6

10

私はついにこれを機能させました！選ばれる必要があります; 他の人が指摘しているようselectに、使用できるイベントがないため、通常ではこれを行うことはできません。しかし、これは、マウスオーバーするとメニューをポップオープンし、マウスアウトするselectとメニューを閉じます。これは、私が望んでいた正確な効果です。

HTML：

<select id="dropdown" data-placeholder="Choose&hellip;">
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
    <option value="three">Option 3</option>
</select>

JS：

$("#dropdown").chosen().next(".chzn-container").hover(
    function(){
        $("#dropdown").trigger("liszt:open");
    },
    function(){
        $(this).trigger("click");
    }
);

$("#dropdown").trigger("liszt:open");メニューを開くものです。liszt:close（私が知る限り）それを閉じたいときにトリガーする同等のイベントはありませんclickが、代わりにそれをトリガーすると同じ効果があります。

于 2012-10-01T15:31:48.193 に答える
4

hoverしばらく経ちましたが、長さを変更するために使用して、ここには表示されない解決策がありますselect：

$('select').hover(function() {

  $(this).attr('size', $('option').length);
}, function() {

  $(this).attr('size', 1);
});

http://codepen.io/anon/pen/avdavQ

そして、これが必要以上のものであり、いくつかのスタイリングを備えたペンです：

デモ

于 2015-09-15T18:04:04.650 に答える
2

トリガーは、jQueryのバインディング関数の1つを介してバインドされた関数のみを呼び出します。

javascriptからselectを開くためのクロスブラウザの方法はありません（ IEの一部のバージョンで呼び出すことは可能かもしれませんthis.click()が、テストできません。他のブラウザでは方法がないと確信しています）。

于 2012-09-27T13:19:01.853 に答える
0

これは不可能です。独自のselect-boxまたはChosenプラグインのみを実装できますが、これは使いやすさに悪影響を及ぼします。また、について考えてtrigger('focus')ください。

于 2012-09-27T13:22:12.630 に答える
0

残念ながら、Chosenを使用した方法は私にはうまくいきませんでした。

しかし、jQueryで独自のセレクターを作成できると思いました。

HTML：

<div class='select'>
  <p class='input'>Select option</p>
  <input type='hidden' name='some_name_to_form' />
  <div class='hidden'>
    <p value='id_1' >option long value</p>
    <p value='id_2' >option 2</p>
    <p value='id_3' >option 3</p>
  </div>
</div>

JS：

$('.hidden p').click(function(){
  $(this).closest('.select').find('.input').text($(this).text());
  $(this).closest('.select').find('input').val($(this).attr('value'));
  $(this).closest('.select').trigger("change");
});

$('.select').change(function(){
  // ... do stuff
});

https://codepen.io/qwer643/pen/LebKpo

于 2018-01-04T17:22:25.073 に答える
0

実例

    $(function(){
    $(".chosen-select").chosen();
        $(".chosen-container-single").hover(function(){
            $(this).addClass("chosen-with-drop");
            $(this).addClass("chosen-container-active");
            $('.chosen-select').trigger("chosen:open");
        },function(){
            $(this).removeClass("chosen-with-drop");
            $(this).removeClass("chosen-container-active");
        });
    });

      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    
<div>
<select data-placeholder="Choose a Country..." class="chosen-select"  style="width:350px;" tabindex="4">
            <option value=""></option>
            <option value="Any">[Any]</option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>

          </select>    
</div>

于 2019-09-19T13:11:32.110 に答える