web-dev-qa-db-ja.com

jQueryはselectの変更を防ぎます

特定の条件が適用される場合、選択ボックスが変更されないようにします。これを行うとうまくいかないようです：

$('#my_select').bind('change', function(ev) {
  if(my_condition)
  {
    ev.preventDefault();
    return false;
  }
});

これは、この時点で選択したオプションがすでに変更されているためだと推測しています。

これを行う他の方法は何ですか？

javascriptjqueryeventsselect
42
overgroove

これを試して：

http://jsfiddle.net/qk2Pc/

var my_condition = true;
var lastSel = $("#my_select option:selected");

$("#my_select").change(function(){
  if(my_condition)
  {
    lastSel.prop("selected", true);
  }
});

$("#my_select").click(function(){
    lastSel = $("#my_select option:selected");
});
46
mattsven

誰かがmattsvenの回答の汎用バージョンを必要とする場合（私がしたように）、ここにあります：

$('select').each(function() {
    $(this).data('lastSelected', $(this).find('option:selected'));
});

$('select').change(function() {
    if(my_condition) {
        $(this).data('lastSelected').attr('selected', true);
    }
});

$('select').click(function() {
    $(this).data('lastSelected', $(this).find('option:selected'));
});
30
dwallace

My_conditionがtrueのときにselectとの相互作用を単に防止したい場合は、常にmousedownイベントをキャプチャして、そこでイベントを防止できます。

var my_condition = true;

$("#my_select").mousedown(function(e){
  if(my_condition)
  {
     e.preventDefault();
     alert("Because my_condition is true, you cannot make this change.");
  }
});

これにより、my_conditionがtrueのときに変更イベントが発生することを防ぎます。

9
Chris Longmoon

考慮すべきもう1つのオプションは、変更したくないときに無効にして、有効にすることです。

//When select should be disabled:
{
    $('#my_select').attr('disabled', 'disabled');
}

//When select should not be disabled
{
    $('#my_select').removeAttr('disabled');
}

コメント以降の更新（必要な機能を理解している場合）：

$("#dropdown").change(function()
{
    var answer = confirm("Are you sure you want to change your selection?")
    {
        if(answer)
        {
            //Update dropdown (Perform update logic)
        }
        else
        {
            //Allow Change (Do nothing - allow change)
        } 
    }            
});

デモ

2
Rion Williams

答えはどれもうまくいきませんでした。私の場合の簡単な解決策は次のとおりです。

$("#selectToNotAllow").focus(function(e) {
    $("#someOtherTextfield").focus();
});

これにより、選択ドロップダウンをクリックまたはタブ移動して、選択にフォーカスしようとするときに、フォーカスを別のフィールド（読み取り専用に設定された近くのテキスト入力）に移動するだけです。愚かなトリックのように聞こえるかもしれませんが、非常に効果的です。

1
user2125504

振る舞いは設定した条件に基づいてリアルタイムで評価されるため、jQueryで「.live」オプションを使用する必要があります。

$('#my_select').live('change', function(ev) {
  if(my_condition)
  {
    ev.preventDefault();
    return false;
  }
});
0
AcidRaZor

これは私のために働いた唯一のものでした（Chromeバージョン54.0.2840.27で）：

$('select').each(function() {
  $(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select').click(function() {
  $(this).data('lastSelectedIndex', this.selectedIndex);
});

$('select[class*="select-with-confirm"]').change(function() {  
  if (!confirm("Do you really want to change?")) {
    this.selectedIndex = $(this).data('lastSelectedIndex');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='fruits' class="select-with-confirm">
  <option selected value="apples">Apples</option>
  <option value="bananas">Bananas</option>
  <option value="melons">Melons</option>
</select>

<select id='people'>
  <option selected value="john">John</option>
  <option value="jack">Jack</option>
  <option value="jane">Jane</option>
</select>
0
w.stoettinger
$('#my_select').bind('mousedown', function (event) {
         event.preventDefault();
         event.stopImmediatePropagation();
     });
0
Morteza Soltanabadiyan

EventHandlerのようなカスタム読み取り専用を実装する

<select id='country' data-changeable=false>
  <option selected value="INDIA">India</option>
  <option value="USA">United States</option>
  <option value="UK">United Kingdom</option>
</select>

<script>
    var lastSelected = $("#country option:selected");

    $("#country").on("change", function() {
       if(!$(this).data(changeable)) {
            lastSelected.attr("selected", true);              
       }        
    });

    $("#country").on("click", function() {
       lastSelected = $("#country option:selected");
    });
</script>

デモ： https://jsfiddle.net/0mvajuay/8/

0
Karthik Moorthy

あなたはjqueryなしでこれを行うことができます...

<select onchange="event.target.selectedIndex = 0">
...
</select>

または、あなたの状態をチェックする機能を行うことができます

<select onchange="check(event)">
...
</select>

<script>
function check(e){
    if (my_condition){
        event.target.selectedIndex = 0;
    }
}
</script>
0
Giolvani

これでうまくいきました。選択するlastSelectedを知っていれば、optionIndexを保持する必要はありません。

var optionIndex = ...
$(this)[0].options[optionIndex].selected = true;
0
Patrick from NDepend team