Replacing space with hyphen, using jQuery?

I'm trying to get a filtering system working but I need the title of the filter to be .test-filter rather than .testfilter

html:

<div id="filters" class="button-group supplier-search">
  <div class="button" data-filter="*">Show All</div>
    <ul>
       <li><a href="#" class="sport">Sport</a></li>
       <li><a href="#" class="music">Music</a></li>
       <li><a href="#" class="testfilter">Test Filter</a></li>
    </ul>
    <select id="filter-select">
       <option selected="selected" value="*">-- Show All --</option
       <option value=".sport">Sport</option>
       <option value=".music">Music</option>
       <option value=".testfilter">Test Filter</option>
    </select>
</div>

the javascript i have for creating the class attr is:

$(".supplier-search a").each(function() {
    var el = $(this);
     $("<option />", {
         "value"   :"."+el.attr("class"),
         "text"    : el.text()
     }).appendTo(".supplier-search select");
});

Is there a way I can do this? I've tried using suggested methods such as .split(' ').join('-') and .replace(/ /g,"-") but I'm getting an error:

Uncaught TypeError: $(...).replace is not a function