Question

我有一个选择选项，如果我选择任何相关div选项显示。这很好。但我想要做出类似的事情，如果我选择它将显示相关的div，但它将自动删除选项。的 FIDDLE

这可能吗？任何帮助将不胜感激。

JS

$(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);

        $('div').hide();
            div.show();

    });
});

Answer 1

修正我的回答以反映问题中的更新：

$(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);
        var selIndex = $("#contact-location").prop('selectedIndex');
        $("#contact-location").prop(selIndex).remove();
        $('div').hide();
        div.show();
    });
});

http://jsfiddle.net/uwt73sj3/

var selIndex = $("#contact-location").prop('selectedIndex');这里我们将select元素索引设置为我们稍后可以使用的变量。

$("#contact-location").prop(selIndex).remove();从选择下拉列表中删除了索引值。

Answer 2

您可以尝试以下方式：

    $(document).ready(function() {
        $('#contact-location').change(function(){
            $('#contact-location option').show(); //clean alls
            $('option:selected',this).hide(); // hide selected
            var location = $(this).val(),
            div = $('#' + location);

            $('div').hide();
                div.show();

        });
})

LIVE DEMO

Answer 3

为什么不在同一时间使事情变得更通用？

$(function () {
    $('#contact-location').change(function () {
        var $this = $(this);

        // show only correct location
        $('div').hide(); // maybe use a class rather than hiding every <div>
        $('#' + $this.val()).show();

        // show only alternate options
        $this.find('option').show();
        $this.find('option:selected').hide();
    });
});

Answer 4

一种解决方案是使用select的子项（即选项），然后隐藏它（这是选项）。然后select的值仍然具有所选选项的值，你必须手动重置它（我通过css使用第一个孩子的内容：第一个子选择器，但你也可以使用其他任何东西）。

$(document).ready(function(e) {
    $('#contact-location').children().click(function(){
        var $select = $(this).parent();
        var $clicked = $(this);
        var location = $clicked.val(); //is the same like $select.val()
        var $div = $('#' + location);

        $clicked.hide();
        $select.val($select.children(":first-child"));
        $div.show();
    });
});

我在一些变量的名称之前用$表示这些变量存储了jQuery对象。

Answer 5

您可以像这样获得所选的选项：

$("option:selected", this);

从那里你可以隐藏或删除它：

$("option:selected", this).hide();
$("option:selected", this).remove();

执行操作后删除选择选项

5 个答案: