Question

我有一个Jquery UI滑块和下拉菜单，基于selected和option标签。滑块更改CSS框的边框宽度（动态可以正常工作）。下拉菜单必须更改边框样式属性（这不会正常工作）。

更改选项后，更改不会立即显示，如滑块所示，但移动滑块后显示下拉菜单中的更改

以下是滑块代码：

$(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

它确实有效，但边框的初始值为0.所以你无法看到它。

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

使用Jquery而不是动态更改CSS

1 个答案: