Question

首先，我是jQuery的新手。

我有问题在通过popover bootstrap调用时选择一个“select”元素。我已经尝试过任何可能的解决方案：在div标签中选择元素等等。但是没有任何效果。

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

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

执行此操作时：

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

select元素尚不存在。尝试打印测试变量，你会明白我的意思。解决方案是仅在存在弹出窗口后检索元素。

Answer 2

试试这个..

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

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

3 个答案: