How to reset a select box after hiding a modal?

Question

I have a select box:

<select class="selectpicker" id="select_seleccionar_proyecto_id">
    <option value="0">Seleccione..</option>
    <option value="1">Tarea número 1</option>
    <option value="2">Tarea número 2</option>
    <option value="3">Tarea número 3</option>
    <option value="4">Tarea número 4</option>
    <option value="5">Tarea número 5</option>
    <option value="6">Tarea número 6</option>
</select>

The select box is located in a modal, and after I close the modal, the select box remains with last selected option last time.

I built a method that is called after the modal is hidden but nothing I have tried seems to reset the select box:

LimpiarModalTarea: function(){

    var self = this;

    //My attempts:
    /*
     * $("select option[value='0']").attr("selected","selected");
     * $("select_seleccionar_proyecto_id").val($("select option[value='0']").val());
     * $("#target").val($("#select_seleccionar_proyecto_id option:first").val());
     * $( "#select_seleccionar_proyecto_id option:first" ).val(); 
     */
},

I put an alert in LimpiarModalTarea and when I closed the modal, the alert work.. so I know that the method is called.

Any suggestions?

modal image http://www.uppic.com/uploads/14302560911.jpg

EDIT:

I'm sorry, but I did not mention that work with different modules.

In the module "A" I have the method that contains the button that opens the modal method and published:

This method contains the html:

                    +                       
                    '<a href="#myModal2" role="button" class="btn btn-success btn-sm" id ="btn_seleccionarTarea_'+iContProyecto+'_id" data-toggle="modal"><strong>Seleccionar una tarea</strong></a>'
                    +

This method contains the publication:

PublicarBotonSeleccionarTarea: function(icontTarea){

    var self = this;

    $("#btn_seleccionarTarea_"+icontTarea+"_id").click(function(){
    self.publishers("seleccionProyecto_seleccionarTarea", icontTarea);
    });
},

In the module "B " I subscribe with this method :

subscribers : function() {

    var self = this;
    self.sb.subscribe('seleccionProyecto_seleccionarTarea', function(data) {
    self.idTarea=data;
    self.showModal();
    });
    },

Action buttons in the modal:

CargarAcciones: function(){

    var self = this;
    self.hideError();
    $('#btn_modal_seleccionarTarea_cancelar_id').click(function(){

    self.HideModal();
    self.hideError();

    });  
    $('#btn_modal_seleccionarTarea_aceptar_id').click(function(){

    var seleccionTarea = $( "#select_seleccionar_proyecto_id option:selected" ).val();
    if(seleccionTarea!=0){
    self.envioNombreTarea();
    self.HideModal();
    }else{
    self.showError();

    }


    });
    },

Then I start to work on what I mentioned before ,so I don´t have the button on the same module.

I need to clean the modal in Module B

try $('#select_seleccionar_proyecto_id').val('0') or $("#select_seleccionar_proyecto_id").attr('selectedIndex', 0); — Sushil, Apr 28 '15 at 21:22
Check out my answer in this [post](http://stackoverflow.com/questions/7445492/how-to-reset-a-select-box-using-jquery/7445661#7445661) — Jack, Apr 28 '15 at 21:26
do you get an error in the console when u use this?? or you can try @Jack's answer. try replacing attr with prop. — Sushil, Apr 28 '15 at 21:27
I put an alert in "LimpiarModalTarea" and i close the modal, the alert work.. so i know that the method is fine , because is the same that i used before, but with a textarea in a modal — Jean Andrés Bergeret Fuhrhop, Apr 28 '15 at 21:30

score 2 · Answer 1 · edited May 23 '17 at 10:32

2

As charlietfl pointed out, simplest to just use

$('select').val('0');

to reset the select element leaving the first option element visible.

edited May 23 '17 at 10:32

Community

1
1

answered Apr 28 '15 at 21:35

spaceman

1,147
8
15

1

should use `prop()` not `attr()`. Simpler to just set value to empty string though on select – charlietfl Apr 28 '15 at 21:38
It might be simpler but the original drop-down has the first option selected when first rendered so I assumed that is what it was supposed to look like the next time the modal was shown. – spaceman Apr 28 '15 at 21:55
will still end as same result, if empty value is passed, select takes on first option value anyway – charlietfl Apr 28 '15 at 21:57
I kept getting a blank box when I did $('select').val(''); https://jsfiddle.net/y4nuzsvk/12/ – spaceman Apr 28 '15 at 21:59
but that would be a proper reset anyway..ok needs to be '0' – charlietfl Apr 28 '15 at 22:00
Oh right, I read that before you added the 0 part. Yep, that makes more sense :). – spaceman Apr 28 '15 at 22:05

Shlomi Hassid · Answer 2 · 2015-08-24T09:02:29.530

You can reset to nothing (an empty value) - that will display nothing in the select box.

Or you can reset to the first value - the first child of the select box.

JSnippet DEMO

Take a look:

$('button#1').click(function(){
    $('select').val('');
});
$('button#2').click(function(){
    $('select').val($('select').children().eq(0).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="selectpicker" id="select_seleccionar_proyecto_id">
  <option value="0">Seleccione..</option>
  <option value="1">Tarea número 1</option>
  <option value="2">Tarea número 2</option>
  <option value="3">Tarea número 3</option>
  <option value="4">Tarea número 4</option>
  <option value="5">Tarea número 5</option>
  <option value="6">Tarea número 6</option>         
</select>  
<button id='1'>Reset To nothing</button>
<button id='2'>Reset To first</button>

How to reset a select box after hiding a modal?

2 Answers2