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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

717閲覧

JavaScript 生年月日のOption Selectで、リロードした時に選択された数字が表示されない。

chie_y

総合スコア20

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/10/22 11:27

お世話になっております。

<form> <select> <option>で、生年月日を選択して保存すると、 画面を再度呼び出した時に、数字はチェックされているのですが、表示が一番上の <OPTION value="">---</OPTION> のままになってしまいます。 ![イメージ説明](731baf3bfba7f43b2962e7eca8c5f606.png) HTMLとJavaScriptは下記です。 再度画面を読んだ時ん、数字ごとチェックしたものを表示させたいのでが、解決方法についてご教授いただけましたら幸いです。 お手数をおかけしますが、何卒よろしくお願いいたします。

<HTML>
<form name="birth">
<select name="year" id="year">
<OPTION value="">---</OPTION>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
</select></td>
<td class="editbirth" align="right">
<select name="month" id="month" class="editbirth">
<OPTION value="">---</OPTION>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
</select>
</td>
<td class="editbirth" align="right">
<select name="days" id="days" class="editbirth">
<OPTION value="">---</OPTION>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
</form>
<Javascript>
画面ロード時
function touroku_btn_loaded() {

// ユーザーの認証情報をajaxリクエストに送る form_userid = localStorage.getItem("l_userid"); form_session_string = localStorage.getItem("l_session_string"); // ajaxリクエストを組み立てる var credentials = { userid: form_userid, session_string: form_session_string, usertype: 'U', }; // ajaxリクエストをサーバーに送信する $.ajax({ url: HOST_NAME + "user/api/account_info/", type: 'GET', dataType: 'json', data: credentials, timeout: 10000, }) // リクエストが成功した時の処理 .done(function (data) { jsondata = JSON.parse(data); if (jsondata.status == 'success') { // 誕生日 birth_year = jsondata.u_birthdate.substring(0, 4); birth_month = jsondata.u_birthdate.substring(5, 7); birth_date = jsondata.u_birthdate.substring(8, 10); document.getElementById("year").value = birth_year; document.getElementById("month").value = birth_month; document.getElementById("days").value = birth_date; } }) // リクエストが失敗した時の処理 .fail(function (XMLHttpRequest, textStatus, errorThrown) { errordata = JSON.parse(JSON.parse(XMLHttpRequest.responseText)); document.getElementById("caution").innerHTML = errordata.message; })

}

// 基本情報編集画面登録ボタンが押された時の処理
function touroku_btn_clicked() {

// ユーザーの認証情報をajaxリクエストに送る form_userid = localStorage.getItem("l_userid"); form_session_string = localStorage.getItem("l_session_string"); // 誕生日 var birth_year = $('[name=year]').val(); var birth_month = $('[name=month]').val(); var birth_days = $('[name=days]').val(); form_birthdate = birth_year + "-" + birth_month + "-" + birth_days; // ajaxリクエストを組み立てる var credentials = { userid: form_userid, session_string: form_session_string, birthdate: form_birthdate, }; // ajaxリクエストをサーバーに送信する $.ajax({ url: HOST_NAME + "user/api/account_update/", type: 'GET', dataType: 'json', data: credentials, timeout: 10000, }) // リクエストが成功した時の処理 .done(function (data) { jsondata = JSON.parse(data); if (jsondata.status == 'success') { if (loginStatus()) { // 次の画面に進む location.href = "profile.html"; } else { location.href = "login.html"; } } }) // リクエストが失敗した時の処理 .fail(function (XMLHttpRequest, textStatus, errorThrown) { errordata = JSON.parse(JSON.parse(XMLHttpRequest.responseText)); document.getElementById("caution").innerHTML = errordata.message; })

}

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

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

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

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

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

guest

回答4

0

ベストアンサー

手元で確認したところでは、再現しないようでした。
optionのvalueと設定値が一致していないことが考えられますが、選択はされているとのことですので問題ないものと思われます。

対象のoption要素に明示的にselected属性を付与してみる等するといかがでしょうか。

option 要素 - HTML | MDN

投稿2017/10/22 12:14

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

chie_y

2017/10/22 12:20

ご回答ありがとうございます。 selectedを全てにつけてみたんですが、一番最後の文字が表示されるようです。(月なら12月の12) 動的に変えなければいけないということですよね。。javascriptですかね。。
guest

0

直接は関係ありませんがjQueryと通常のjavascriptの混在具合が微妙です
jQueryを利用しているのであれば、それにそった書き方で統一したほうが楽だと思います

document.getElementById("year").value = birth_year;

のような箇所は

javascript

1$('#year').val(birth_year); 2

のような処理が良いのではないでしょうか?

投稿2017/10/23 00:20

yambejp

総合スコア114581

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

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

chie_y

2017/10/23 09:05

ご回答ありがとうございます! それでも、ダメでした。。 もう少し、頑張ってみます! 下記の本日の日付のようなものは、普通に出るみたいですので応用できたらと思ってるのですが、、 Javascript <script> (function() { 'use strict'; /* 今日の日付データを変数todayに格納 */ var optionLoop, this_day, this_month, this_year, today; today = new Date(); this_year = today.getFullYear(); this_month = today.getMonth() + 1; this_day = today.getDate(); /* ループ処理(スタート数字、終了数字、表示id名、デフォルト数字) */ optionLoop = function(start, end, id, this_day) { var i, opt; opt = null; for (i = start; i <= end ; i++) { if (i === this_day) { opt += "<option value='" + i + "' selected>" + i + "</option>"; } else { opt += "<option value='" + i + "'>" + i + "</option>"; } } return document.getElementById(id).innerHTML = opt; }; /* 関数設定(スタート数字[必須]、終了数字[必須]、表示id名[省略可能]、デフォルト数字[省略可能]) */ optionLoop(1950, this_year, 'id_year', this_year); optionLoop(1, 12, 'id_month', this_month); optionLoop(1, 31, 'id_day', this_day); })(); </script> HTML <select name="year" id="id_year"> </select> <select name="month" id="id_month"> </select> <select name="day" id="id_day"> </select>
guest

0

結局textboxで文字入力に変えました。

投稿2017/11/28 05:00

chie_y

総合スコア20

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

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

0

結局textboxで文字入力に変えました。

投稿2017/11/28 04:53

編集2017/11/28 04:57
chie_y

総合スコア20

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問