Фильтр выбора динамических тегов не загружает контент в Chrome / Safari

Я пытаюсь создать список тегов из определенной категории, которая загружает сообщения на той же странице. Список оформлен как выпадающий список, но структурирован как список. После выбора тега из раскрывающегося списка пользователь попадает на отдельную страницу, где отображаются все сообщения, содержащие выбранный тег.

Я хочу, чтобы сообщения загружались на страницу с определенным списком тегов категории, а не перенаправляли их на новую страницу. Вот мой код:

==== РЕДАКТИРОВАТЬ ====

Я смог получить результаты для загрузки в div на той же странице. Однако это работает только в Firefox и IE, но не в Chrome или Safari. Сам выпадающий список сбрасывает и показывает параметры, но не загружает результаты по клику в Chrome / Safari. Рабочий пример можно увидеть Вот. Какие-нибудь мысли?

HTML:

<div id="dd" class="selectDiv" tabindex="1">

<span class="selectDefault"></span>

<?php $args = array(
'categories' => '15'
);
$tags = get_category_tags($args);
?>
<?php
$content .= "<select class=\"selectBox\"><option class=\"default-text\">-- Filter by topic --</option>";
foreach ($tags as $tag) {
$content .= "<option class=\"loader\" href=\"$tag->tag_link\">$tag->tag_name</option>";
}
$content .= "</select>";
echo $content;
?>
</div>

<div id="result"></div>

Javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
var defaulttext = $('.default-text').text();

$('.selectDefault').text(defaulttext);

$('.selectBox').on('change',function(){
var defaulttext2 = $('.selectBox').find(":selected").text();
$('.selectDefault').text(defaulttext2);
});

$(function() {
$('.loader').click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#result').load($(this).attr('href'));
});
});
</script>

Любые предложения о том, как я могу это сделать, будут очень признательны. Заранее спасибо!