javascript セレクトのオプションのリンク先
セレクトボックスのオプションをクリックするだけでリンクしたいのですが、どれを選択しても最初の値、最初のオプションが選ばれたことになってしまいます。  
コードは以下の通りです。

Ｊａｖａｓｃｒｉｐｔ

```

    $(".custom-select").each(function() {
      var classes = $(this).attr("class"),
          id      = $(this).attr("id"),
          name    = $(this).attr("name");
      var template =  '<div class="' + classes + '">';
          template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
          template += '<div class="custom-options">';
          $(this).find("option").each(function() {
            template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
          });
      template += '</div></div>';
    
      $(this).wrap('<div class="custom-select-wrapper"></div>');
      $(this).hide();
      $(this).after(template);
    });
    $(".custom-option:first-of-type").hover(function() {
      $(this).parents(".custom-options").addClass("option-hover");
    }, function() {
      $(this).parents(".custom-options").removeClass("option-hover");
    });
    $(".custom-select-trigger").on("click", function() {
      $('html').one('click',function() {
        $(".custom-select").removeClass("opened");
      });
      $(this).parents(".custom-select").toggleClass("opened");
      event.stopPropagation();
    });
    $(".custom-option").on("click", function() {
        var browser = document.selecton.sources.value;
        location.href = browser
    }
    
```

追記  
失礼しました。

ＨＴＭＬ

```

    <form name="selecton" class="center">
      <select name="sources" id="sources" class="custom-select sources">
    
        <option value="https://www.yahoo.co.jp/">Yahoo</option>
        <option value="https://www.google.co.jp/">google</option>
        <option value="hashtag">Rus-Jap</option>
      </select>
    </form>
    
```
クリックイベントで値を取るなら

```

        $('[name=sources]').on('click',function() {
            var data = $('[name=sources]').val();
            console.log(data);
        });
    
```

で取れるとおもいます。selectタグでclickイベントは色々忙しいのでchangeで書いてみました。

```

    $(function() {
    $('[name=sources]').on('change',function() {
                    var data = $('[name=sources]').val();
                    alert(data);
                });
    });
```

```

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <form name="selecton" class="center">
      <select name="sources" id="sources" class="custom-select sources">
    
        <option value="https://www.yahoo.co.jp/">Yahoo</option>
        <option value="https://www.google.co.jp/">google</option>
        <option value="hashtag">Rus-Jap</option>
      </select>
    </form>
```
クリックイベントで値を取るなら

```

        $('[name=sources]').on('click',function() {
            var data = $('[name=sources]').val();
            console.log(data);
        });
    
```

で取れるとおもいます。selectタグでclickイベントは色々忙しいのでchangeで書いてみました。

```

    $(function() {
    $('[name=sources]').on('change',function() {
                    var data = $('[name=sources]').val();
                    alert(data);
                });
    });
```

```

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <form name="selecton" class="center">
      <select name="sources" id="sources" class="custom-select sources">
    
        <option value="https://www.yahoo.co.jp/">Yahoo</option>
        <option value="https://www.google.co.jp/">google</option>
        <option value="hashtag">Rus-Jap</option>
      </select>
    </form>
```