javascript 如何从应用了 Select2 的 SELECT 中删除选项?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26347088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 05:50:47  来源:igfitidea点击:

How to remove a option from a SELECT with Select2 applied?

javascriptjqueryjquery-select2

提问by ReynierPM

So, I have this HTML code:

所以,我有这个 HTML 代码:

<input type="checkbox" id="orders_lives_in_ccs" name="orders[lives_in_ccs]" class="lives_in_ccs">
<select id="orders_shipping_from" name="orders[shipping_from]" required="required" class="shipping_from toSelect2">
    <option value="" selected="selected">-- SELECCIONAR --</option>
    <option value="MRW">MRW - COBRO EN DESTINO</option>
    <option value="DOMESA">DOMESA - COBRO EN DESTINO</option>
    <option value="ZOOM">GRUPO ZOOM - COBRO EN DESTINO</option>
</select>

I need to remove the option MRWwhen checkbox .lives_in_ccsis checked so I made this code:

MRW选中复选框时,我需要删除该选项,.lives_in_ccs因此我编写了以下代码:

$(function () {
    $('.toSelect2').select2();

    var detachedMember;
    $('.lives_in_ccs').click(function () {
        if (this.checked) {
            detachedMember = $('.shipping_from option[value="MRW"]').detach();
        } else {
            $('.shipping_from option[value=""]').after(detachedMember);
        }

        $(".secure_shipping").toggle(this.checked);
    });
});

This code works but I'm having a problem and didn't found the way to fixit. Having thisjsFiddle do this tests:

此代码有效,但我遇到了问题并且没有找到修复它的方法。让这个jsFiddle 做这个测试:

  • Leave the SELECT with the default value which is --SELECCIONAR--and mark the check in the left side, that will works and will remove the option MRWfrom the main SELECT, if you unmark the check the value will appear again on the SELECT
  • Choose MRW(the first choice) on the SELECT and mark the check in the left side, that will remove the option MRWfrom the main SELECT, but will leave the option as SELECTED which is wrong since the server side isn't expecting it.
  • 将 SELECT 保留为默认值,--SELECCIONAR--并在左侧标记选中,这将起作用并将MRW从主 SELECT 中删除该选项,如果取消选中选中该值将再次出现在 SELECT 上
  • MRW在 SELECT 上选择(第一选择)并在左侧标记检查,这将从MRW主 SELECT 中删除该选项,但会将选项保留为 SELECTED 这是错误的,因为服务器端不期望它。

So, how do I remove the option even if it's selected on the SELECT element? Any help?

那么,即使在 SELECT 元素上选择了该选项,我该如何删除它?有什么帮助吗?

回答by Gohn67

Here is the updated fiddle for testing: http://jsfiddle.net/fgaqgpd7/2/

这是用于测试的更新小提琴:http: //jsfiddle.net/fgaqgpd7/2/

This will reset the value of the select2 input:

这将重置 select2 输入的值:

$('.toSelect2').select2('val','');

You can apply it you click event handler. Basically if MRW is selected, then reset the select2 value.

您可以在单击事件处理程序时应用它。基本上,如果选择了 MRW,则重置 select2 值。

$(function () {
    $('.toSelect2').select2();
    var detachedMember;
    $('.lives_in_ccs').click(function () {
        if (this.checked) {
            if ($('.toSelect2').select2('val') == 'MRW') {
                $('.toSelect2').select2('val','');
            }
            detachedMember = $('.shipping_from option[value="MRW"]').detach();
        } else {
            $('.shipping_from option[value=""]').after(detachedMember);
        }

        $(".secure_shipping").toggle(this.checked);
    });
});

回答by Syed Muhammad Zeeshan

try this :

试试这个 :

if($(".lives_in_ccs").is(':checked')){ 
    $("#orders_shipping_from option[value='MRW']").remove();
}

Hope this helps :)

希望这可以帮助 :)