web-dev-qa-db-ja.com

Javascript / jQueryを使用してプログラムでSELECTドロップダウンリストを閉じる

1つの値で初期化されるドロップダウンがあります。ユーザーがクリックすると、単一の要素が削除され、「Loading」という新しい要素が追加されます。その後、AJAX呼び出しがサーバーに発行され、戻ると新しい値が追加されます制御。

問題は、更新中にコントロールが開いたままになることです。それを閉じたいと思います。

これは例です： http://jsfiddle.net/vtortola/CGuBk/2/

例のAJAXは、おそらくjsfiddle apiを呼び出すときに何か間違っているためにデータを取得できませんが、SELECTは更新中は開いたままです。

別の入力でフォーカスなしにプログラムでドロップダウンリストを閉じる方法を知りたいです。

javascriptjqueryhtmlhtml-select
27
vtortola

他の人についてはわかりませんが、Chromeの最新の安定したビルドを使用しています。.blur()を含む他の回答はどれも役に立ちません。

この質問は逆の質問です： プログラムでドロップダウンメニューを開く

得られたと思われる結論は、ブラウザがフィールド要素のクリックを処理する方法のために不可能だということです。

より良い解決策は、ドロップダウンを純粋なHTMLのものに置き換え、必要に応じて単純な.hide()コマンドで非表示にすることです。

12
Death

click内にこの行の終わりを追加するだけです。

$(this).blur();

それは次のようになります

$select.click(function(e){

    $select.html('<option value="-1">Loading</option>');

    $(this).blur();
    ......
    ...
});

[〜＃〜] demo [〜＃〜]

ハハ！ Chrome新しいバージョンに問題がある場合：

次のような偽のselectを使用します。

<select class="fake" style="display: none">
    <option value="-1">Loading</option>
</select>

そして、次のようなことをします：

$select.click(function(e) {
    $(this).hide(0); // hide current select box

    //$select.html('<option value="-1">Loading</option>');

    $('select.fake').show(0); // show the fake slide

    $.ajax({
           // your code
        }).done(function(data) {

           $('select.fake').hide(0);
           $select.show(0);

        })
        ......
    }):

[〜＃〜] demo [〜＃〜]

12
thecodeparadox

後...

$select.html('<option value="-1">Loading</option>');

追加してみてください...

$select.blur();
6
freefaller

あなたがする必要があるのは、他の何かをターゲットにすることだと思うか、選択に焦点を当てないでください（ぼかし）

<select>
    <option value="0">Initial Value</option>
</select>

var $select = $('select');
$select.click(function(e){

    $select.html('<option value="-1">Loading</option>');

    $.ajax({
        url: '/echo/json/',
        method:'post',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: { json: JSON.stringify([1, 2, 3]), delay:1 }
    }).done(function(data){

        $.each($.map(data, function (item, i) {
                    return "<option value='" + item +"' >" + item + "</option>";

                }), function (i, item) {
                    $element.append(item);
                });

    }).fail(function(){
        alert('error');
    });

   e.preventDefault();
   e.stopPropagation(); 
   $(this).blur();    
});
5
Huangism

これは古い質問であり、すでに答えがありますが、次の解決策は目標を達成するための公正な方法になると思います。

選択を再レンダリングすることで、選択の終了をシミュレートできます。 jQueryでは、簡単なプラグインを実装してそれを実現できます。

$.fn.closeSelect = function() {
    if($(this).is("select")){
        var fakeSelect = $(this).clone();
        $(this).replaceWith(fakeSelect);
    }
};

次のように使用します：

$("#mySelect").closeSelect();
2
Jonathan

解決策1非常に簡単な解決策が見つかりました。

select.style.display = "none";
setTimeout(function () {
    select.style.display = "block";
}, 10);

これはDOMの要素を非表示にします。これにより、ドロップダウンが閉じられ、10msの遅延で（遅延なしでは機能しません）DOMに返されます。

解決策2：少し複雑ですが、遅滞なくDOMから要素を完全に削除し、すぐにそれを返します。

var parent = select.parentElement;
var anchor = document.createElement("div");
parent.insertBefore(anchor, select);
parent.removeChild(select);
parent.insertBefore(select, anchor);
parent.removeChild(anchor);

これは要素のペアレントを保存し、選択する前にアンカーをもたらします。アンカーは、DOMの同じ位置にselectを以前の状態に復元するためにあります。もちろん、select要素を機能させるために実装できます。

HTMLSelectElement.prototype.closeDropdown = function () {
    var parent = this.parentElement;
    var anchor = document.createElement("div");
    parent.insertBefore(anchor, this);
    parent.removeChild(this);
    parent.insertBefore(this, anchor);
    parent.removeChild(anchor);
}

そして、ただ電話する

select.closeDropdown();

例

1
Misaz

選択した要素を閉じる最も簡単な方法は、一時的に無効にすることです。

$selectElement.attr('disabled', true);

setTimeout(() => {
   $selectElement.attr('disabled', false);
}, 4);
0
Bogdan Chernovol

他の誰かがAngular2を使用している場合、そこで働いた解決策は、$($event.srcElement).attr("disabled","disabled");を呼び出す（フォーカス）イベントを追加することでした

その後、タイムアウトを追加して、要素を再びアクティブにしたいときに要素を再度有効にします。

0
Vern Jensen
$('.select').on('change', function () {
    $(this).click();
});
0
panser

古い記事は知っていますが、非常に簡単な解決策があります。

$(someSelectElement).on('change', function(e) {
    e.target.size = 0    
}

リスト内の項目をクリックすると、選択要素が折りたたまれます。

0
user3619165