jQuery UI Slider 在选择或输入更改时更改百分比答案

【问题标题】：jQuery UI Slider to change percentage when select or input is changedjQuery UI Slider 在选择或输入更改时更改百分比
【发布时间】：2012-09-25 10:10:04
【问题描述】：

我在更改选择或输入改变时更新UI jQuery滑块的问题 - 有人对源有任何想法来解决这个问题？

$('.application-progress').slider({
    range: "min",
    min: 0,
    max: 100,
    animate: true,
    slide: function(event, ui){
        $("#progress").html(ui.value+"%");
    }
});
$("#progress").html($(".application-progress").slider("value")+"%");

$('input').focusout(function(){
    var percentage = 0;
    $('input').each(function(){
        if($(this).val() != "")
            percentage += 10;
    });
    $("#progress").slider({value: percentage});
    $("#progress").html($(".application-progress").slider("value")+"%");
});

我已添加到 jsfiddle：http://jsfiddle.net/Ykx5f/1/。

【问题讨论】：

标签： jquery jquery-ui jquery-slider

【解决方案1】：

这是你想要达到的目标吗？

$("input, select").change(function() {
    var percentage = 0;
    $('input, select').each(function() {
        if ($.trim(this.value) != "") percentage += 10;
    });
    $(".application-progress").slider("value", percentage);

    $("#progress").html(percentage + "%");
});

演示： http://jsfiddle.net/Ykx5f/9/

这里是更新版本，它会根据输入字段的数量自动计算百分比：

$("input, select").change(function() {
    var fields = $("input, select");
    var percentage = 100 * fields.filter(function() {
        return $.trim(this.value) != "";
    }).length / fields.length;

    $(".application-progress").slider("value", percentage);
    $("#progress").html(percentage + "%");
});

演示： http://jsfiddle.net/Ykx5f/11/

【讨论】：

对输入效果很好，但 select 不行？
如果您更改“选择标题”选项的值，它将起作用：<option value="">Select Title</option>。查看更新的小提琴。
我的不好，它似乎确实有效，但第一个是下拉菜单，当更改为 50% 1st 时？
我更改了选择的值，并且很享受！非常感谢！
@JamesBrandon 欢迎您！顺便说一句，在更新的答案中检查更好的版本。

【解决方案2】：

我已更新您的fiddle。附加到更改事件而不是聚焦/模糊。

【讨论】：