Question

I’ve been trying to get this function working but have been unsuccessful. Also, there are no console errors.

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

If all you want to do is change the border of an element when the value of the select element changes, you can do it with far more simple JavaScript/jQuery:

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

Note that using "div" as your selector in the change event handler will apply this to all div elements in the document.

Also note how the colon in your example has been replaced with a comma – the jQuery css function takes 2 parameters, which will be comma separated as would any parameters to a JavaScript function.