Question

如果某个条件适用，我想阻止更改选择框。这样做似乎不起作用：

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

我猜这是因为到目前为止所选的选项已经改变了。

有什么其他方法可以做到这一点？

Answer 1

试试这个：

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");
});

Answer 2

如果有人需要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'));
});

Answer 3

如果您只是想在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为真时发生任何更改事件。

Answer 4

另一个需要考虑的选择是当您不希望它能够被更改并启用它时禁用它：

//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)
        } 
    }            
});

Demo

Answer 5

您可能需要在jQuery中使用“.live”选项，因为将根据您设置的条件实时评估行为。

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

Answer 6

这些答案都不适合我。在我的案例中，简单的解决方案是：

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

这样可以完成对选择下拉列表的单击或跳格，并在尝试聚焦选择时简单地将焦点移动到另一个字段（附近的文本输入设置为只读）。可能听起来像愚蠢的诡计，但非常有效。

Answer 7

你可以在没有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>

Answer 8

像eventHandler

一样实现自定义readonly

<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/

Answer 9

这是唯一对我有用的东西（在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>

Answer 10

这对我有用，如果您知道要选择的lastSelected，则无需保留optionIndex。

var optionIndex = ...
$(this)[0].options[optionIndex].selected = true;

Answer 11

$('#my_select').bind('mousedown', function (event) {
         event.preventDefault();
         event.stopImmediatePropagation();
     });

Answer 12

如果仍然有人感兴趣，可以使用jQuery 3.3.1解决问题。

BOOST_...

}）;

Answer 13

我一直在Google上寻找“ javascript阻止选择更改”，而这个问题是第一个结果。最后，我的解决方案是：

const $select = document.querySelector("#your_select_id");
let lastSelectedIndex = $select.selectedIndex;
// We save the last selected index on click
$select.addEventListener("click", function () {
    lastSelectedIndex = $select.selectedIndex;
});

// And then, in the change, we select it if the user does not confirm
$select.addEventListener("change", function (e) {
    if (!confirm("Some question or action")) {
        $select.selectedIndex = lastSelectedIndex;
        return;
    }
    // Here do whatever you want; the user has clicked "Yes" on the confirm
    // ...
});

我希望它对正在寻找并且没有jQuery的人有所帮助：）

Answer 14

其他答案都不适合我，这就是最终的结果。

我必须跟踪 select 元素的先前选定值并将其存储在 data-* 属性中。然后我不得不对 JQuery 提供的选择框使用 val() 方法。此外，我必须确保在填充选择框时在选项中使用了 value 属性。

<body>
    <select id="sel">
        <option value="Apple">Apple</option>        <!-- Must use the value attribute on the options in order for this to work. -->
        <option value="Bannana">Bannana</option>
        <option value="Cherry">Cherry</option>
    </select>
</body>

<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript" language="javascript"></script>

<script>
    $(document).ready()
    {
        //
        // Register the necessary events.
        $("#sel").on("click", sel_TrackLastChange);
        $("#sel").on("keydown", sel_TrackLastChange);
        $("#sel").on("change", sel_Change);
        
        $("#sel").data("lastSelected", $("#sel").val());
    }
    
    //
    // Track the previously selected value when the user either clicks on or uses the keyboard to change
    // the option in the select box.  Store it in the select box's data-* attribute.
    function sel_TrackLastChange()
    {
        $("#sel").data("lastSelected", $("#sel").val());
    }
    
    //
    // When the option changes on the select box, ask the user if they want to change it.
    function sel_Change()
    {
        if(!confirm("Are you sure?"))
        {
            //
            // If the user does not want to change the selection then use JQuery's .val() method to change
            // the selection back to what it was  previously.
            $("#sel").val($("#sel").data("lastSelected"));
        }
    }
</script>

我希望这可以帮助和我有同样问题的其他人。

jQuery阻止select的更改

14 个答案: