24221


以下のように用意されたセレクトボックスがあり、

[code]

    <select id="data">
      <option value=1>hoge</option>
      <option value=2>fuga</option>
      <option value=3>hogehoge</option>
    </select>
    
    <a href="#1">hoge</a>
    <a href="#2">fuga</a>
    <a href="#3">hogehoge</a>
    
[/code]

jqueryで値の変化を取得しそれにマッチするアンカーリンクに何かしらの処理をしたいのですが、  
どうしてもうまくいきません。例えばセレクトボックスで`'fuga'`が選択されたらfugaのaタグの背景色を変化させる等。

以下jQueryでvalueまでは取得できているコードになります。

[code]

    $(document).ready(function(){
      $('data').change(function(){
        var value = $(this).val();
        /**/
    });
    });
    
[/code]

どなたかご教示いただけると助かります。


CC BY-SA 3.0
2016-04-20T23:25:48.963
24194
2016-04-21T09:25:30.193
8500
question
javascript jquery
jQueryでセレクトボックスの値とマッチするaハッシュ要素を取得する


タイトルの「aハッシュ要素」と言うのが何のことかよくわからないので、意図を読み違えているかもしれませんが。

href属性値の"#〜"の内容によってa要素を選択したいと言うのであれば、普通に`[]`セレクタが使えるはずです。

[code]

    $(document).ready(function(){
      $('#data').change(function(){ //<-ここは'data'ではなく、'#data'ですよね
        var value = $(this).val();
        var $a = $('a[href="#'+value+'"]');
        //...
      });
    });
    
[/code]


CC BY-SA 3.0
2016-04-21T00:37:50.267
24195
2016-04-21T00:37:50.267
13972
24194
answer


サンプルを作ってみました。いかがですか。そうではない、という場合はコメントを付けてください。修正します。

[code]

    $('#selectHash').change(function () {
      var selectedHash = this.value;
      if (selectedHash) {
        var result = $('a')
        .removeClass('hashSelected')
        .filter(function () {
          return this.hash === selectedHash;
        });
        
        // for example, change color
        result.addClass('hashSelected');
      }
    });
[/code]

[code]

    .hashSelected { background-color: rgba(0, 123, 221, 0.5); }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <a href="http://example.com/path/to/content#header">example.com #header</a>
    <a href="/local/path/to/content#hIndex">local #hIndex</a>
    <a href="#test">#test</a>
    <a href="#hIndex">#hIndex</a>
    
    <select id="selectHash">
      <option value="">pls select hash</option>
      <option value="#header">#header</option>
      <option value="#hIndex">#hIndex</option>
      <option value="#test">#test</option>
    </select>
[/code]


CC BY-SA 3.0
2016-04-21T09:25:30.193
24221
2016-04-21T09:25:30.193
24194
answer