35028


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

Ｊａｖａｓｃｒｉｐｔ

[code]

    $(".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
    }
    
[/code]

追記  
失礼しました。

ＨＴＭＬ

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2017-05-26T02:27:45.413
35026
2017-05-26T05:04:27.400
2017-05-26T03:49:33.877
23377
23377
question
javascript jquery
javascript セレクトのオプションのリンク先


クリックイベントで値を取るなら

[code]

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

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

[code]

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

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-05-26T04:19:40.210
35028
2017-05-26T05:04:27.400
2017-05-26T05:04:27.400
22793
22793
35026
answer