隐藏模式后如何重置选择框？答案

【问题标题】：How to reset a select box after hiding a modal?隐藏模式后如何重置选择框？
【发布时间】：2015-04-28 21:20:45
【问题描述】：

我有一个选择框：

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

选择框位于模态框内，我关闭模态框后，选择框仍保留上次选择的选项。

我构建了一个在模态隐藏后调用的方法，但我没有尝试过似乎重置选择框：

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(); 
     */
},

我在LimpiarModalTarea 中放置了一个警报，当我关闭模式时，警报工作.. 所以我知道该方法被调用了。

有什么建议吗？

模态图像 http://www.uppic.com/uploads/14302560911.jpg

编辑：

很抱歉，我没有提到与不同模块一起工作。

在模块“A”中，我的方法包含打开模式方法并发布的按钮：

此方法包含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>'
                    +

此方法包含出版物：

PublicarBotonSeleccionarTarea: function(icontTarea){

    var self = this;

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

在模块“B”中，我使用此方法订阅：

subscribers : function() {

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

模态中的操作按钮：

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

    }


    });
    },

然后我开始处理我之前提到的内容，所以我在同一个模块上没有按钮。

我需要清理模块 B 中的模态

【问题讨论】：

试试 $('#select_seleccionar_proyecto_id').val('0') 或 $("#select_seleccionar_proyecto_id").attr('selectedIndex', 0);
ty，但不起作用
在post查看我的答案
当你使用这个时你会在控制台中得到一个错误吗？或者你可以试试@Jack 的回答。尝试用 prop 替换 attr。
我在“LimpiarModalTarea”中放了一个警报，然后我关闭了模式，警报工作..所以我知道该方法很好，因为与我之前使用的相同，但在文本区域中模态

标签： javascript jquery module modal-dialog jquery-selectbox

【解决方案1】：

正如charlietfl 指出的，最简单的就是使用

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

重置选择元素，使第一个选项元素可见。

【讨论】：

应该使用prop() 而不是attr()。通过选择将值设置为空字符串更简单
它可能更简单，但最初的下拉菜单在第一次渲染时选择了第一个选项，所以我认为这是下次显示模式时它应该看起来的样子。
仍然会以相同的结果结束，如果传递了空值，则选择无论如何都会采用第一个选项值
当我做 $('select').val(''); jsfiddle.net/y4nuzsvk/12
但无论如何这将是一个适当的重置..ok 需要为 '0'

【解决方案2】：

您可以重置为空值（空值） - 这将在选择框中不显示任何内容。

或者您可以重置为第一个值 - 选择框的第一个子项。

JSnippet DEMO

看看：

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

【讨论】：