无法正常工作后初始化的选择框答案

【问题标题】：Select box initialized after not working properly无法正常工作后初始化的选择框
【发布时间】：2014-04-29 20:03:41
【问题描述】：

我正在尝试获取选择框的值，但它总是给我带来第一个值。

一开始选择是空的。我按下一个显示模式的按钮并加载选择框的信息。我认为问题来了，因为我在按下按钮之前没有加载选择选项，因为我尝试使用另一个选择并且效果很好

这是模态：

<div class="modal fade" id="myModalPremios" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Premios</h4>
            </div>
            <div id="premios" class="modal-body">
                <jsp:include page="../frag/premios-list-frag.jsp"/>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" aria-hidden="true" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

这是模态框内的表单：

<form class="form-horizontal" role="form">
    <div class="form-group">
        <input type="hidden" id="id" name="quiniela.id" value="${quiniela.id }"/>
    </div>
    <div class="form-group">
        <label for="plantillaOwnerQuiniela" class="col-sm-4 control-label">Quiniela</label>
        <div class="col-sm-5">
            <select class="form-control" name="quiniela.plantillaOwnerQuiniela" id="plantillaOwnerQuiniela"  ${read }>
                <c:forEach items="${lista2 }" var="pl">
                    <option value="${pl.id }"
                    <c:if test="${pl.id == quiniela.plantillaOwnerQuiniela.id}">selected="selected"</c:if>>${pl.nombrePlantillaOwner} - ${pl.precioQuiniela}Bs</option>
                </c:forEach>
            </select>
        </div>
    </div>
</form>

这就是我显示模态的方式：

$("#myModal").modal("show");

我读到可能该元素不存在于 Dom 中，然后我尝试使用此函数查看是否发生了某些事情，但它不起作用。

$('#plantillaOwnerQuiniela').on('change',function() {
    var selectVal = $('#plantillaOwnerQuiniela :selected').val();
    alert(selectVal);
});

【问题讨论】：

我正在使用 bootstrap 3 modal.. 我真的不知道如何用我的代码尝试你的答案，我以不同的方式显示我的模态
它不会工作，因为我也在使用 struts2.. 当我显示模式时，我正在填充选择框数据调用一个动作

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

只是猜测，但在您绑定 change 侦听器时，似乎 DOM 中不存在 plantillaOwnerQuiniela 元素。

尝试以下方法：

$("body").on("change", "#plantillaOwnerQuiniela", function(e){
    var selectVal = $(e.currentTarget).val();
    alert(selectVal);
});

使用.on() 将侦听器附加到body 并将其委托给选择，而不是附加到选择本身；页面加载中可能存在也可能不存在。

【讨论】：

我认为你是对的，因为选择开始为空，然后我按下按钮创建并将信息加载到表单中，然后显示模式。但这不起作用

【解决方案2】：

您应该像这样将更改事件绑定到弹出框初始化方法：

$('.button').popover({ 
    html : true,
    content: function() {
        return $('#popover_content_wrapper').html();
    }                 
}).parent().delegate('#plantillaOwnerQuiniela', 'change', function() {
    alert($(this).val());
});

Here 就是一个例子！

【讨论】：

【解决方案3】：

我通过在尝试读取 if 的值时包含 modal-body 类解决了我自己的问题。像这样：

$('.modal-body #plantillaOwnerQuiniela :selected').val();

【讨论】：