0

選択ドロップダウンがあり、ユーザーがその選択ドロップダウンの「外側」をクリックすると、ドロップダウンが消えます。これは私が現在持っているものです：

$(this).html($("<select/>", {
  id: 'sel',
  change: function() {
    selectdone(this, title_id, status_type);
  },
  blur: function() {
    selectdone(this, title_id, status_type);
  },

上記で、ドロップダウンの外側をクリックしても何も起こりません。関数が起動するのは、選択ドロップダウンの値を変更した場合だけです。

ユーザーがドキュメントの選択ドロップダウン以外の場所をクリックすると、この関数が起動するように、上記をどのように達成しますか?

4

1 に答える 1

2

これは不可能だと思います。別の回答で指摘されているように、アクティブ<select>が他の入力の受け入れを禁止しているようです。

私の更新された fiddle を参照してください。test背景をクリックすると、選択が展開されていないときにアラートが表示されることに注意してください。展開してクリックすると、アラートは発生しません。これは、ブラウザのデフォルトの動作のようです。選択がアクティブになっている間、他のすべての入力 (マウスの動きを含む) を無視しているように見えます。

selectedIndexただし、を-1に設定することで、選択した要素に対してイベントを発生させることができました。このようにして、有効なオプションはすべて変更されます。

例

$(function(){    
    var title_id = '', status_type = ''; 
    $('body').html(
        $("<select/>", {
            id: 'sel',
            change: function() {
                selectdone(this, title_id, status_type);
            },
            blur: function() {
                selectdone(this, title_id, status_type);
            }
        })
        .append($('<option />', { 'text':'one'}))
        .append($('<option />', { 'text':'two'}))
    );

    $('#sel').prop('selectedIndex', -1); 
});

function selectdone(element, titleid, statustype){
    $(element).hide().prop('selectedIndex', -1); 
}
于 2012-07-10T01:12:51.480 に答える