2013-07-27 2 views
1

클리어 될 때까지 부트 스트랩의 popover 내에 사용자의 드롭 다운 선택 사항을 유지해야합니다. 나는 이미 "selected"애트리뷰트를 선택 변경에 따라 동적으로 변경할 수 있고, 그 변경이 HTML select 요소를 대체하도록 만들었다. 나는 모든 것이 작동하고 있다고 생각한다 (나는 경고 기능을 통해 그것을 본다). 불행히도 popover의 "외양"은 아니며, 그렇습니다. 내가 그것을 조사 할 때, 그것은 내가주의 깊게 얻은 것과 일치하지 않습니다.부트 스트랩의 팝 오버에서 드롭 다운 선택을 유지하는 방법은 무엇입니까?

여기 내 피들입니다. 고맙습니다. http://jsfiddle.net/kDmVq/

$(document).on('shown', "#btnPopover", function() { 
    $('select#optionDropdown').select2({ 
     allowClear: true 
    }).change('#optionDropdown', function() { 
     theID = $(this).val(); 
     theSelection = $(this).children('option:selected').text(); 
     $('#selectedID').text(theID); 
     $('#selectedText').text(theSelection); 
     $('#optionDropdown option').removeAttr("selected"); 
     $('option[value=' + theID + ']').attr("selected", "selected"); 
     optionDropdownRet = $('#optionDropdown').html(); 
    }); 
    alert($('#optionDropdown').html()); 
}); 

$(document).on('hide', "#btnPopover", function() { 
    alert(optionDropdownRet); 
    $('options#optionDropdown').replaceWith(optionDropdownRet); 
}); 

답변

1

내가 참여 앞뒤로 숨겨진 사업부와 팝 오버의 팝 오버의 컨텐츠를 작성 해낸 솔루션. 부트 스트랩 팝 오버 이벤트 후 팝 오버 버튼에 클릭 이벤트 리스너를 추가함으로써, 나는

$(document).ready(function() { 

    $('#pop').popover({ 
     html : true, 
     title: 'Popover', 
     content: function() { 
      html = $('#popover_content').html(); 
      return html; 
     } 
    }); 

    $('#pop').on('click', function (e) { 
     initPopover(); 
    }); 

}); 

있었다 트릭 추가 ...이 나타난 후 팝 오버의 컨텐츠에 도착하고 양식 요소를 반복 할 수 있었다 popover 함수의 뒤의 click 이벤트 리스너 http://jsfiddle.net/5NQ84/5/

: 그런 다음, "initPopover"... 여기에
function initPopover() { 
    var ishidden = true; 
    if($('.popover').hasClass('in')) { 
     ishidden = false; 
    } else { 
     ishidden = true; 
    } 

    if(ishidden == true) { 

     var content = $('.popover-content'); 
     var html = content.html(); 

     $('#popover_content').html(html); 

     $('#popover_content select').each(function(i){ 
      var sel = $('.popover-content select').eq(i).val(); 
      $(this).val(sel); 
     }); 

    } else { 

     $('.popover-content select').each(function(i){ 
      var sel = $('#popover_content select').eq(i).val(); 
      $(this).val(sel); 
     }) 

     $('#popover_content').empty(); 

    } 

} 

는 바이올린의
관련 문제