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

如果您要做的只是在border元素的值发生更改时更改元素的select，则可以使用更简单的JavaScript / jQuery来完成：

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

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

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

Answer 2

您的css调用需要逗号，而不是冒号。此外，使用val（）获取值更容易：http://jsfiddle.net/2wfVj/11/

Answer 3

点击 JS Lint 按钮（位于屏幕顶部）显示：

Error:
Problem at line 6 character 33: Expected ')' and instead saw ':'.
$("div").css('border-style' : str);

Problem at line 6 character 34: Missing semicolon.
$("div").css('border-style' : str);

Problem at line 6 character 35: Expected an assignment or function call and instead saw an expression.
$("div").css('border-style' : str);

Problem at line 6 character 38: Missing semicolon.
$("div").css('border-style' : str);

Problem at line 6 character 38: Expected an identifier and instead saw ')'.
$("div").css('border-style' : str);

Problem at line 6 character 38: Stopping, unable to continue. (75% scanned).
Implied global: $ 1,3,4,6

JS Fiddle确定的故障是什么。

通过:方法将,切换为css()来修复所有这些问题：JS Fiddle demo。

另外：您使用的是$(this).text()而不是$(this).val()（text()方法返回了无效的CSS normal : dotted box，而不仅仅是dotted）。

那和+=将变量的新值附加到旧值，而不是简单地覆盖它。固定代码（我认为固定）是：

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

JS Fiddle demo

稍作修改的例子：

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

JS Fiddle demo

Answer 4

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

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

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

Answer 5

这对我有用：

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

此处，在对dropdown的更改中，您将收集所选的选项值。然后调整css。

http://jsfiddle.net/jasongennaro/2wfVj/12/

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

5 个答案: