Javascript jquery从下拉列表更改边框样式

我一直试图让这个函数工作，但没有成功。此外，没有控制台错误

$（“选择”）.change（函数（）{
var str=“”；
$（“选择选项：选定”）。每个（函数（）{
str+=$（this）.text（）+“”；
});
$（“div”）.css（'border-style'：str）；
})
.change（）
.hiddentextarea{
文本阴影：0 0 8px#000；颜色：透明；-webkit用户选择：无；-khtml用户选择：无；-moz用户选择：无；-o用户选择：无；用户选择：无；
}

测试
正常：虚线框
正常：虚线框
普通：实心框
正常：双盒
3D：槽盒
3D：脊盒
3D：插入框
3D：起始框
css调用需要逗号，而不是冒号。此外，使用val（）获取值更容易：
如果您只想在
select
元素的值更改时更改元素的
边框
，您可以使用更简单的JavaScript/jQuery来实现：

$("select").change(function () {
    $("div").css('border-style', this.value);
});

请注意，在更改事件处理程序中使用
“div”
作为选择器将此应用于文档中的所有
div
元素

还请注意示例中的冒号是如何被逗号替换的-jQuery
css
函数使用两个参数，与JavaScript函数的任何参数一样，这些参数将以逗号分隔。
单击JS Lint按钮（屏幕顶部）显示：

这些是JS Fiddle识别的故障

通过在
css（）
方法中将
：
切换到
，
来修复所有这些问题

另外：您使用的是
$（this）.text（）
而不是
$（this）.val（）
（例如，
text（）
方法返回无效的CSS
normal:pointed box
，而不是
pointed
）

以及将变量的新值附加到旧值的
+=
，而不是简单地重写它。固定代码（据我所知是固定的）是：


还有一个稍加修改的例子：

$("select").change(function() {
    var str = $("select option:selected").val();
    $("div").css('border-style', str);
}).change();

.
这对我很有用：

$("select").change(function() {
    var getChoice = $("select option:selected").val();
    $('#vss_border').css('borderStyle', getChoice);
});

在这里，在更改
下拉列表时
，您将收集所选的选项值。然后调整css

哦，哈哈，是的，有点难过，我没有用我的大脑进一步解决它，谢谢；）或者更好的办法是，像James那样省去我的额外调用。就我个人而言，在调试JavaScript时，如果某些东西不起作用，我会在重要的地方添加各种调用到
console.log
。我也经常使用Firebug。而且jsfiddle.net是一个快速、轻松地尝试新想法的好地方。@James您能告诉我如何使用console.log吗？），因此在我们的情况下firebug不会出现anything@SAFAD-打开Firebug，然后打开Console选项卡，用这个提琴试试：你会看到控制台上写着“Hello！”。这也适用于Chrome或IE9中的开发工具（按F12键打开它们）。或者，您可以只使用
alert
语句而不是
console.log
。
$("select").change(function() {
    var str = $("select option:selected").val();
    $("div").css('border-style', str);
}).change();

$(document).ready(function(){    
   $("#dropdown").change(onSelectChange);

});
function onSelectChange(){
    var selected = $("#dropdown option:selected");        
    var output = "";

    $("#testarea").css('border-style', selected.val());
}

$("select").change(function() {
    var getChoice = $("select option:selected").val();
    $('#vss_border').css('borderStyle', getChoice);
});