使用Jquery更改CSS不是动态的

Question

我有一个基于选定标签和选项标签的Jquery UI滑块和下拉菜单。 滑块更改CSS框的边框宽度（这可以动态地正常工作）。 下拉菜单必须更改border-style属性（此操作不起作用）。

更改选项后，更改不会像滑块一样立即显示，但是在移动滑块后，下拉菜单中的更改才会显示

这是滑块代码：

$(function() {
$("#border_slider").slider({
value: 0,
min: 0,
max: 20,
step: 1,
    slide: function( event, ui ) {
    $("#border_amount").val(ui.value );
    $("#plugin_previewbox").css("border", (ui.value) + "px "+$("#select-border").val()+" #000000");
    }
});
    $("#border_amount").val($("#border_slider").slider("value"));
});

这是下拉选项的jQuery：

$('#select-border').change(function() {
var BorderStyle = $(this).find('option:selected').attr('value');
$("#plugin_previewbox").removeAttr("border");
$("#plugin_previewbox").css("border", $("#border_amount").val() + "px " + BorderStyle + " #000000");
});

这是下拉菜单的HTML：

< select id="select-border" ><br>
< option selected="selected" value="solid" >solid< /option ><br>
< option value="dotted" >dotted< /option ><br>
< option value="dashed" >dashed< /option ><br>
... and so on....<br>
< /select >

任何想法为什么这不起作用？

Answer 1

它确实可以工作，但是border的初始值为0。所以您看不到它。

将第一个border_slider值设置为1（甚至10）。