滑块现在更新选择值 获取选择值来更新滑块值?

发布于 2024-12-03 01:23:06 字数 1354 浏览 0 评论 0原文

我创建了一个滑动条来确定用户想要下载的最大字节数。该滑块连接到一个选择框。当滑块沿线移动时,它会更新选择框中的值。但是,当您从选择框中选择一个值时,它不会更新滑块的值。我如何让它双向更新?

JavaScript

        $(function() {
            var select = $( "#camlogbytes");
            var slider = $( " <div id='slider'></div>").insertAfter(select).slider({
                min: 1,
                max: 6,
                step: 1,
                value: select[0].selectedIndex + 1, 
                slide: function(event, ui) {
                    select[0].selectedIndex = ui.value - 1;
                }
            });
            $("camlogbytes").change(function() {
                slider.slider("value", this.selectedIndex + 1);
            });
        });

HTML

    <tr>
        <td class="column1">Max number of bytes per Camera Log:</td>
        <td id="sliderbytes">
            <select name="camlogbytes" id="camlogbytes">
            <option value="0"selected="selected">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        </td>
    </tr>

I have a created a slide bar to determine the max number of bytes that a user wants to download. This slider is connected to a select box. As the slider moves along the line, it updates the value in the select box. However, when you chose a value from the select box it does not update the value of the slider. How do i get it to update both ways??

JavaScript

        $(function() {
            var select = $( "#camlogbytes");
            var slider = $( " <div id='slider'></div>").insertAfter(select).slider({
                min: 1,
                max: 6,
                step: 1,
                value: select[0].selectedIndex + 1, 
                slide: function(event, ui) {
                    select[0].selectedIndex = ui.value - 1;
                }
            });
            $("camlogbytes").change(function() {
                slider.slider("value", this.selectedIndex + 1);
            });
        });

HTML

    <tr>
        <td class="column1">Max number of bytes per Camera Log:</td>
        <td id="sliderbytes">
            <select name="camlogbytes" id="camlogbytes">
            <option value="0"selected="selected">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        </td>
    </tr>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

黑寡妇 2024-12-10 01:23:06

你会踢自己的,你错过了选择器开头的#:

 $("#camlogbytes").change(function() {
        slider.slider("value", this.selectedIndex + 1);
 });

You will kick yourself, you missed the # at the start of the selector here:

 $("#camlogbytes").change(function() {
        slider.slider("value", this.selectedIndex + 1);
 });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文