質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

7342閲覧

jquery セレクトボックスのプルダウン展開後の初期表示位置を調整したい

freedomman

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/06/04 05:09

前提・実現したいこと

お世話になります。
セレクトボックスのプルダウン展開後の初期表示位置の調整をjqueryで実行してます。

行っていることは現在の西暦から40をマイナスし、
その年くらいからの初期表示を行っております。

例)2018 - 40 = 1978
プルダウン内の「1978」付近から表示されるようにする

現在は静的にですが、
$("#hoge option[value='1978']").after($("<option>").val("").text("").prop('selected', true));
このようなコードでvalueが1978のオプションの後に、選択状態の空要素を追加してむりやり初期表示位置を調整しております。

できれば
$("#hoge option[value='変数の値']").after($("<option>").val("").text("").prop('selected', true));
のようにしたいのですが、可能でしょうか

変数の値は「selectVal」という変数になります。

発生している問題・エラーメッセージ

$("#hoge option[value='1978']").after($("<option>").val("").text("").prop('selected', true)); の[value='1978']に変数「selectVal」を反映したい

該当のソースコード

javascript

1<script> 2 (function ($) { 3 $(function () { 4 var date = new Date(), 5 getYear = date.getFullYear(), 6 //現在の西暦から40マイナス 7 targetAge = getYear - 40; 8 console.log(targetAge); 9 var selectVal = $("#hoge").val(); 10 selectVal = targetAge; 11 console.log(selectVal); 12 targetAge = selectVal; 13 $("#hoge option[value='1978']").after($("<option>").val("").text("").prop('selected', true)); 14 }); 15 })(jQuery); 16</script>

該当のソースコード

html

1<select id="hoge" name="example"> 2 <option value="">選択してください</option> 3 4 <option value="1900">1900</option> 5 6 <option value="1901">1901</option> 7 8 <option value="1902">1902</option> 9 10 <option value="1903">1903</option> 11 12 <option value="1904">1904</option> 13 14 <option value="1905">1905</option> 15 16 <option value="1906">1906</option> 17 18 <option value="1907">1907</option> 19 20 <option value="1908">1908</option> 21 22 <option value="1909">1909</option> 23 24 <option value="1910">1910</option> 25 26 <option value="1911">1911</option> 27 28 <option value="1912">1912</option> 29 30 <option value="1913">1913</option> 31 32 <option value="1914">1914</option> 33 34 <option value="1915">1915</option> 35 36 <option value="1916">1916</option> 37 38 <option value="1917">1917</option> 39 40 <option value="1918">1918</option> 41 42 <option value="1919">1919</option> 43 44 <option value="1920">1920</option> 45 46 <option value="1921">1921</option> 47 48 <option value="1922">1922</option> 49 50 <option value="1923">1923</option> 51 52 <option value="1924">1924</option> 53 54 <option value="1925">1925</option> 55 56 <option value="1926">1926</option> 57 58 <option value="1927">1927</option> 59 60 <option value="1928">1928</option> 61 62 <option value="1929">1929</option> 63 64 <option value="1930">1930</option> 65 66 <option value="1931">1931</option> 67 68 <option value="1932">1932</option> 69 70 <option value="1933">1933</option> 71 72 <option value="1934">1934</option> 73 74 <option value="1935">1935</option> 75 76 <option value="1936">1936</option> 77 78 <option value="1937">1937</option> 79 80 <option value="1938">1938</option> 81 82 <option value="1939">1939</option> 83 84 <option value="1940">1940</option> 85 86 <option value="1941">1941</option> 87 88 <option value="1942">1942</option> 89 90 <option value="1943">1943</option> 91 92 <option value="1944">1944</option> 93 94 <option value="1945">1945</option> 95 96 <option value="1946">1946</option> 97 98 <option value="1947">1947</option> 99 100 <option value="1948">1948</option> 101 102 <option value="1949">1949</option> 103 104 <option value="1950">1950</option> 105 106 <option value="1951">1951</option> 107 108 <option value="1952">1952</option> 109 110 <option value="1953">1953</option> 111 112 <option value="1954">1954</option> 113 114 <option value="1955">1955</option> 115 116 <option value="1956">1956</option> 117 118 <option value="1957">1957</option> 119 120 <option value="1958">1958</option> 121 122 <option value="1959">1959</option> 123 124 <option value="1960">1960</option> 125 126 <option value="1961">1961</option> 127 128 <option value="1962">1962</option> 129 130 <option value="1963">1963</option> 131 132 <option value="1964">1964</option> 133 134 <option value="1965">1965</option> 135 136 <option value="1966">1966</option> 137 138 <option value="1967">1967</option> 139 140 <option value="1968">1968</option> 141 142 <option value="1969">1969</option> 143 144 <option value="1970">1970</option> 145 146 <option value="1971">1971</option> 147 148 <option value="1972">1972</option> 149 150 <option value="1973">1973</option> 151 152 <option value="1974">1974</option> 153 154 <option value="1975">1975</option> 155 156 <option value="1976">1976</option> 157 158 <option value="1977">1977</option> 159 160 <option value="1978">1978</option> 161 162 <option value="1979">1979</option> 163 164 <option value="1980">1980</option> 165 166 <option value="1981">1981</option> 167 168 <option value="1982">1982</option> 169 170 <option value="1983">1983</option> 171 172 <option value="1984">1984</option> 173 174 <option value="1985">1985</option> 175 176 <option value="1986">1986</option> 177 178 <option value="1987">1987</option> 179 180 <option value="1988">1988</option> 181 182 <option value="1989">1989</option> 183 184 <option value="1990">1990</option> 185 186 <option value="1991">1991</option> 187 188 <option value="1992">1992</option> 189 190 <option value="1993">1993</option> 191 192 <option value="1994">1994</option> 193 194 <option value="1995">1995</option> 195 196 <option value="1996">1996</option> 197 198 <option value="1997">1997</option> 199 200 <option value="1998">1998</option> 201 202 <option value="1999">1999</option> 203 204 <option value="2000">2000</option> 205 206 <option value="2001">2001</option> 207 208 <option value="2002">2002</option> 209 210 <option value="2003">2003</option> 211 212 <option value="2004">2004</option> 213 214 <option value="2005">2005</option> 215 216 <option value="2006">2006</option> 217 218 <option value="2007">2007</option> 219 220 <option value="2008">2008</option> 221 222 <option value="2009">2009</option> 223 224 <option value="2010">2010</option> 225 226 <option value="2011">2011</option> 227 228 <option value="2012">2012</option> 229 230 <option value="2013">2013</option> 231 232 <option value="2014">2014</option> 233 234 <option value="2015">2015</option> 235 236 <option value="2016">2016</option> 237 238 <option value="2017">2017</option> 239 240 <option value="2018">2018</option> 241</select>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

その年くらいからの初期表示を行っております。

「くらい」の定義がわかりませんが、初期値を「その年」からにしてはいけないのでしょうか?

javascript

1 2$(function(){ 3 var d=new Date(); 4 $('#hoge').val(d.getFullYear()-40); 5}); 6

投稿2018/06/04 05:34

yambejp

総合スコア114747

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

freedomman

2018/06/04 05:40

ありがとうございます。 説明が抜けていてすみません。 初期表示は何も選択されていない状態にしておきたいです。
guest

0

ベストアンサー

すでにtargetAgeが取得できているので、埋め込むだけでいいのではないでしょうか

JavaScript

1$('#hoge option[value="' + targetAge.toString() + '"]').after($('<option selected="selected"></option>'));

投稿2018/06/04 06:33

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

freedomman

2018/06/04 07:25

やりたい事が解決できました。 この度はありがとうございました。 toString()でtargetAgeの変数を文字列で返すということですね。 consoleで確認したら違いがわかりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問