How do I reset values in a select dropdown

Question

0.00/5 (No votes)

See more:

i have a modal with this dropdownlist it is works fine, but when i close i would like to clear this dropdown and put the default value.

<div class="situacaoPedido col-md-12">
                            <select id="StatusPedidoSaveId" name="StatusPedidoSaveId" class="select2">
                                <option value="" selected>Selecione</option>
                                <option value="1">Pendente Compra</option>
                                <option value="2">Aguardando Pagamento</option>
                                <option value="3">Confirmado</option>
                                <option value="4">Aprovado</option>
                                <option value="5">Em Separação</option>
                                <option value="6">Enviado</option>
                            </select>

What I have tried:

i tried this javascript code:

$("#modal-trocar-status").on("show.bs.modal", function () {
    $("#DataPedido").val('');
    $("#numPedido").val('');
    $("#observacao").val('');
    //$('#StatusPedidoSaveId').prop('selectedIndex', 0);
    //document.getElementById('StatusPedidoSaveId').selectedIndex = 0;
    $("#StatusPedidoSaveId").val($("#StatusPedidoSaveId").data("default-value"));
    $('.obsAlteracao').hide();
    $('.dadosAlterados').hide();
});

this work in datapicker, textbox but dos not work to a select dropdown element

Posted 7-Nov-20 9:34am

Fernando_Costa

Updated 8-Nov-20 23:59pm

v2

Add a Solution

Comments

[no name] 7-Nov-20 20:50pm

I don't think everyone knows what "reset this dropdown" means. You should describe what you're "seeing" and what you want to see / happen.

2 solutions

Solution 1

You can make use of the defaultSelected property of an option element[^]:

On close of your modal, have the following code:

JavaScript

$('#my_select option').each(function () {
    if (this.defaultSelected) {
        this.selected = true;
        return false;
    }
})

Make sure to have the default option have property selected like:

HTML

<option value="b" selected="selected">b</option>

Posted 7-Nov-20 21:20pm

Sandeep Mewara

Comments

Fernando_Costa 8-Nov-20 16:55pm

I tried but it didn't work either, in dropdonw, the last choice appears and not the text "Selecionar"

Sandeep Mewara 9-Nov-20 0:38am

Would help if you debug and see the execution.

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2020-11-09T00:00:00

Solution 2

Based on your CSS class name, I'm guessing you're using Select2[^]?

If that's the case, you'll need to trigger the change event after setting the value, as shown in the documentation[^]:

JavaScript

$("#StatusPedidoSaveId").val('').trigger('change');

Posted 9-Nov-20 0:00am

Richard Deeming

Comments

Fernando_Costa 9-Nov-20 9:50am

Thanks a lot.

How do I reset values in a select dropdown

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

How do I reset values in a select dropdown

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us