选择未正常工作后初始化的框

时间:2014-04-29 20:03:41

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

我试图获取选择框的值,但它总是带给我第一个值。

在开始时,选择为空。我按一个显示模态的按钮并加载选择框的信息。我认为问题来了,因为我没有加载选择选项,直到按下按钮,因为我尝试了另一个选择并且效果很好

这是模式:

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

3 个答案:

答案 0 :(得分:0)

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

尝试以下方法:

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

使用.on()将监听器附加到body并将其委托给select,而不是附加到select本身;在页面加载中可能存在也可能不存在。

答案 1 :(得分:0)

您应该将change事件绑定到popover初始化方法,如下所示:

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

Here就是一个例子!

答案 2 :(得分:0)

我通过在尝试读取if的值时包含modal-body类来修复我自己的问题。像这样:

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