javascript - jquery 从下拉菜单更改边框样式

Question

我一直在尝试让这个功能正常工作，但一直没有成功。此外，没有控制台错误。

$("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
    $("div").css('border-style' : str);
        })
        .change();

.hiddentextarea{
    text-shadow: 0 0 8px #000; color: transparent; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
}

<div id="testarea" >
            <div id="vss_border" class="vss_border" style="border-style: dotted; border-color: #8a4c8a; border-width:medium; align:center;">
     test
        </div>

<select  id="dropdown">
            <option value="dotted" selected="selected"> Normal : dotted box</option>
            <option value="dashed"> Normal : dashed box</option>
            <option value="solid">  Normal : solid box</option>
            <option value="double"> Normal : double box</option>
            <option value="groove">   3D   : groove box</option>
            <option value="ridge">    3D   : ridge box</option>
            <option value="inset">    3D   : inset box</option>
            <option value="outset">   3D   : outset box</option>
        </select>

Answer 1

如果您只想在 select 元素的值更改时更改元素的 border，则可以使用更简单的 JavaScript/jQuery 来完成:

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

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

另请注意您的示例中的冒号是如何被逗号替换的 - jQuery css 函数采用 2 个参数，它们将与 JavaScript 函数的任何参数一样以逗号分隔。