jquery - 如何在 popover-bootstrap 中选择元素？

Question

首先，我是 jQuery 的新手。

当它通过弹出窗口引导程序调用时，我无法选择一个“选择”元素。我已经尝试过我遇到的任何可能的解决方案：在 div 标签中选择元素等。但没有任何效果。

这是我的小提琴http://jsfiddle.net/zMrmL/。

var test2 = $('#optionDropdown2');
var test = $('#popoverContent select.optionDropdown'); //I have no idea here

    $(test2).select2();
    $(test).select2();


    $(test).change(function() {
        var theID = $(test).select2('data').id;
        var theSelection = $(test).select2('data').text;
        $('#selectedID').text(theID);
        $('#selectedText').text(theSelection);
    });

    $(test2).change(function() {
        var theID2 = $(test2).select2('data').id;
        var theSelection2 = $(test2).select2('data').text;
        $('#selectedID2').text(theID2);
        $('#selectedText2').text(theSelection2);
    });

Answer 1

尝试这个..

$(document).on('change','#optionDropdown',function(){
  var theID = $(this).val();
  var theSelection = $(this).children('option:selected').text();
  $('#selectedID').text(theID);
  $('#selectedText').text(theSelection);
})

http://jsfiddle.net/zMrmL/5/

Answer 2

在弹出框出现之前，弹出框内的选择框在 DOM 中不存在。

当你这样做时：

var test = $('#popoverContent select.optionDropdown')

选择元素还不存在。试着打印出测试变量，你就会明白我的意思了。解决方案是仅在弹出框存在后才检索元素。

Answer 3

是的，Robert 和 lashab 都向我指出了相同的问题，即在单击弹出框之前永远不会存在选择框。我将函数调用放在 popover 函数中，它可以工作。

这是新的小提琴......只是为了继续学习http://jsfiddle.net/zMrmL/7/

$(document).on('shown', "#btnPopover", function () {
$('select.optionDropdown').select2().change(function() {
var theID = $(this).select2('data').id;
    var theSelection = $(this).select2('data').text;
    $('#selectedID').text(theID);
    $('#selectedText').text(theSelection);
});
});