c:["$","div",null,{"children":[null,["$","article",null,{"className":"post_container__WUwGB","children":[["$","h1",null,{"className":"post_name__KYhtG","children":[["$","span","select optionで選択された時にvalueに指定した値で遷移する方法",{"className":" ","style":{},"children":"select optionで選択された時にvalueに指定した値で遷移する方法"}]]}],["$","section",null,{"children":[[["$","h2",null,{"children":[["$","span","select optionで選択された時にページを遷移したい",{"className":" ","style":{},"children":"select optionで選択された時にページを遷移したい"}]]}],["$","p",null,{"children":[["$","span","selectタグの",{"className":" ","style":{},"children":"selectタグの"}],["$","span","optionで指定された値が選択された時にその値で画面を遷移させたい",{"className":"post_bold__xro2Y ","style":{},"children":"optionで指定された値が選択された時にその値で画面を遷移させたい"}],["$","span","時があると思います。",{"className":" ","style":{},"children":"時があると思います。"}]]}],["$","p",null,{"children":[["$","span","今回はその方法をご紹介していきたいと思います。",{"className":" ","style":{},"children":"今回はその方法をご紹介していきたいと思います。"}]]}],["$","p",null,{"children":[["$","span","HTMLとJSだけで実現できる機能なので、実際に動きがわかるように",{"className":" ","style":{},"children":"HTMLとJSだけで実現できる機能なので、実際に動きがわかるように"}],["$","span","サンプルのデモ",{"className":"post_bold__xro2Y ","style":{},"children":"サンプルのデモ"}],["$","span","も用意したので実際の動きと合わせて参考にして下さい！",{"className":" ","style":{},"children":"も用意したので実際の動きと合わせて参考にして下さい！"}]]}],["$","h2",null,{"children":[["$","span","実際のサンプルデモ",{"className":" ","style":{},"children":"実際のサンプルデモ"}]]}],["$","p",null,{"children":[["$","span","こちらが今回実現したい機能になります。この後、実際の実装方法について説明していますので是非参考にしてください。",{"className":" ","style":{},"children":"こちらが今回実現したい機能になります。この後、実際の実装方法について説明していますので是非参考にしてください。"}]]}],["$","h2",null,{"children":[["$","span","HTMLでやってみる",{"className":" ","style":{},"children":"HTMLでやってみる"}]]}],["$","p",null,{"children":[["$","span","まずは一番手軽なHTMLのみでの実装方法をご紹介します。",{"className":" ","style":{},"children":"まずは一番手軽なHTMLのみでの実装方法をご紹介します。"}]]}],["$","h3",null,{"children":[["$","span","サンプルデモ",{"className":" ","style":{},"children":"サンプルデモ"}]]}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"\n\n"}}],["$","h3",null,{"children":[["$","span","サンプルコード",{"className":" ","style":{},"children":"サンプルコード"}]]}],["$","p",null,{"children":[["$","span","onChange",{"className":"post_bold__xro2Y ","style":{},"children":"onChange"}],["$","span","を使用して、valueの値が変化した時に",{"className":" ","style":{},"children":"を使用して、valueの値が変化した時に"}],["$","span","location.href=value;",{"className":"post_bold__xro2Y ","style":{},"children":"location.href=value;"}],["$","span","を実行します。 valueには、optionのvalueに指定したものが入ってきます。",{"className":" ","style":{},"children":"を実行します。 valueには、optionのvalueに指定したものが入ってきます。"}]]}],["$","pre",null,{"className":"post_pre__zPI4k","children":["$","code","a24e98a7-47bc-4d34-91f0-85705a3309a5",{"className":"post_code_block__k19UZ","children":""}]}],["$","h2",null,{"children":[["$","span","JavaScriptでやってみる",{"className":" ","style":{},"children":"JavaScriptでやってみる"}]]}],["$","p",null,{"children":[["$","span","今度は",{"className":" ","style":{},"children":"今度は"}],["$","span","JavaScript",{"className":"post_bold__xro2Y ","style":{},"children":"JavaScript"}],["$","span","でやる方法です。 HTMLではなく、",{"className":" ","style":{},"children":"でやる方法です。 HTMLではなく、"}],["$","span","JavaScript",{"className":"post_bold__xro2Y ","style":{},"children":"JavaScript"}],["$","span","で実装する必要がある場合もあるかと思うので参考にしてください。",{"className":" ","style":{},"children":"で実装する必要がある場合もあるかと思うので参考にしてください。"}]]}],["$","h3",null,{"children":[["$","span","サンプルデモ",{"className":" ","style":{},"children":"サンプルデモ"}]]}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"\n\n"}}],["$","h3",null,{"children":[["$","span","サンプルコード",{"className":" ","style":{},"children":"サンプルコード"}]]}],["$","p",null,{"children":[["$","span","document.getElementById",{"className":"post_bold__xro2Y ","style":{},"children":"document.getElementById"}],["$","span","でselectの要素を取得します。",{"className":" ","style":{},"children":"でselectの要素を取得します。"}]]}],["$","p",null,{"children":[["$","span","onchange",{"className":"post_bold__xro2Y ","style":{},"children":"onchange"}],["$","span","でselectのvalueの値が変化した時に",{"className":" ","style":{},"children":"でselectのvalueの値が変化した時に"}],["$","span","window.location.href",{"className":"post_bold__xro2Y ","style":{},"children":"window.location.href"}],["$","span","で画面を遷移しています。",{"className":" ","style":{},"children":"で画面を遷移しています。"}]]}],["$","pre",null,{"className":"post_pre__zPI4k","children":["$","code","f6b8ca35-6708-41d3-911c-02e1ccec1b58",{"className":"post_code_block__k19UZ","children":"\n\n"}]}],["$","h2",null,{"children":[["$","span","jQueryでやってみる",{"className":" ","style":{},"children":"jQueryでやってみる"}]]}],["$","p",null,{"children":[["$","span","今度は",{"className":" ","style":{},"children":"今度は"}],["$","span","jQuery",{"className":"post_bold__xro2Y ","style":{},"children":"jQuery"}],["$","span","での実装方法を見てみましょう。",{"className":" ","style":{},"children":"での実装方法を見てみましょう。"}]]}],["$","h3",null,{"children":[["$","span","サンプルデモ",{"className":" ","style":{},"children":"サンプルデモ"}]]}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"\n\n"}}],["$","p",null,{"style":{"height":"2px","margin":0},"children":[]}],["$","h3",null,{"children":[["$","span","サンプルコード",{"className":" ","style":{},"children":"サンプルコード"}]]}],["$","p",null,{"children":[["$","span","今回は",{"className":" ","style":{},"children":"今回は"}],["$","span","$$(\"select[name=change_js]\")",{"className":"post_bold__xro2Y ","style":{},"children":"$$(\"select[name=change_js]\")"}],["$","span","でselectの要素を取得してみました。こちらもselectのvalueの値が変化した時に",{"className":" ","style":{},"children":"でselectの要素を取得してみました。こちらもselectのvalueの値が変化した時に"}],["$","span","window.location.href",{"className":"post_bold__xro2Y ","style":{},"children":"window.location.href"}],["$","span","で画面を遷移しています。注意点は、selectで選択された値を取得する時は、valueではなく、val()で取得しないといけないので注意してください。",{"className":" ","style":{},"children":"で画面を遷移しています。注意点は、selectで選択された値を取得する時は、valueではなく、val()で取得しないといけないので注意してください。"}]]}],["$","pre",null,{"className":"post_pre__zPI4k","children":["$","code","c909490e-8725-48f1-8200-39984b5bd164",{"className":"post_code_block__k19UZ","children":"\n\n"}]}]],["$","$Le",null,{"href":"/","className":"post_back__Gjrkm","children":"← Go home"}]]}]]}]]}]