CODEWITHSUNDEEP
javascriptjquery
Raihan
Raihan

Reputation: 4011

Remove Select option after doing the action

I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed. FIDDLE

Is this possible ? Any help will be appreciated.

JS

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

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

    });
});

Upvotes: 0

Views: 207

Answers (5)

Simon Zyx
Simon Zyx

Reputation: 7181

one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).

$(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();
    });
});

I used $ before the names of some variables to indicate that these variables store jQuery objects.

Upvotes: 1

Paul S.
Paul S.

Reputation: 66364

Why not make things more generic at the same time?

$(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();
    });
});

Upvotes: 1

the_pete
the_pete

Reputation: 822

Fixed my answer to reflect the update in the question:

$(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'); here we set the select element index to a variable we can work with later.

$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.

Upvotes: 1

Wilfredo P
Wilfredo P

Reputation: 4076

You could try something like:

    $(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

Upvotes: 1

Bic
Bic

Reputation: 3134

You can get the selected option like this:

$("option:selected", this);

From there you can hide or remove it:

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

Upvotes: 0

Related Questions