使用Bootstrap时，选择Box Reset不起作用

Question

我有两个选择框，第一个是可用的包。有一个叫做展位包的领域。如果用户点击此字段，则会显示另一个选择框。

<select id="package" name="package">
    <option value="10">Bronze Package</option>
    <option value="15">Silver Package</option>
    <option value="20">Gold Package</option>
    <option value="booth">A Booth Package</option>
    <option value="0">No Package</option>
</select>

<div id="display" style="display:none;">
    <select id="booth_package" name="booth-package">
        <option value="0">Select a Booth Package</option>
        <option value="200">The Bier Package</option>
        <option value="200">The Cocktail Package</option>
        <option value="200">The Spirits Package</option>
        <option value="200">The Bar Tab Package</option>
    </select>
</div>

$('#package').on('change',function(){
   if( $(this).val()=="booth"){
       $("#display").show()
    }
    else{
        $("#display").hide()
    }
}).trigger('change');

然后，如果用户突然改变主意并选择不同的包装，不仅展位包隐藏，而且还会重置为第一个选项：

$('#package').change(function(){
    $('#booth_package').val( $('#booth_package').prop('defaultSelected') );
});

我的问题是，当我将它带入我的网站（使用Bootstap进行选择框）时，代码无效，但我在JS FIDDLE上工作，请看：

http://jsfiddle.net/barrycorrigan/GJ9rU/1/

当我使用bootstrap时，任何人都可以帮助或告诉我为什么这不起作用吗？

*注意显示/隐藏功能有效但重置选项不起作用。