jQuery UI滑块不会更新iFrame

Question

我试图让iFrame进行几种不同的更新，但似乎无法实现，我添加了一个文本框以确保具有正确的刻度。我正在使用Labledslider.js显示刻度线。

https://github.com/ctcherry/jquery-ui.labeled-slider

<link href="Content/jquery.ui.labeledslider.css" rel="stylesheet" />
<script src="Scripts/jquery.ui.labeledslider.js"></script>
<script>
    function updateiFrame(tick) {
        $('#amount').val(tick);
        //tried 
        document.getElementById('iFrameMap').src = 'inventory.html&id=' + tick;
        //tried
        $('#iFrameMap').attr("src", 'inventory.html&id=' + tick);       }
    $(function () {
        $('#slider').labeledslider({
            min: 1,
            max: 7,
            values: [1],
            tickArray: [1, 2, 3, 4, 5, 6, 7],
            tickLabels: {
                1: 'Monday',
                2: 'Tueday',
                3: 'Wednesday',
                4: 'Thursday',
                5: 'Friday',
                6: 'Saturday',
                7: 'Sunday',
            },
            slide: function (event, ui) {
                updateiFrame(ui.values[0]);

            }
        });

    });
</script>
<div class="col-md-6 col-sm-6 col-xs-6">
    <div id="slider"></div> <input id="amount" /></div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
    <iframe id="iFrameMap" runat="server" height="800px" width="800px"></iframe>
</div>