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 .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

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./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

• javascript
• jquery
• module
• modal-dialog
• jquery-selectbox

• try $('#select_seleccionar_proyecto_id').val('0') or $("#select_seleccionar_proyecto_id").attr('selectedIndex', 0); – Sushil Commented Apr 28, 2015 at 21:22
• ty, but doesn't work – Jean Andrés Bergeret Fuhrhop Commented Apr 28, 2015 at 21:26
• Check out my answer in this post – Jack Commented Apr 28, 2015 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 Commented Apr 28, 2015 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 Commented Apr 28, 2015 at 21:30

2 Answers 2

As charlietfl pointed out, simplest to just use

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

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

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./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>