この記事では、JSの関連コードを共有して、誕生日の選択に適した日付リンケージ選択を実装します。特定のコンテンツは次のとおりです
目標を達成します：年、月、日の3つの選択ボックス、および隠された入力。 JSを介して入力の値を取得します。日付形式に値がある場合、年、月、日の選択は入力の時間です。それ以外の場合は空です。その年のデフォルト間隔は1900年から今年です
ブートストラップを使用しました。クラスのブートストラップの関連指示を参照してください
以下はHTMLコンテンツです。
<div> <label> <select node-type = "Birthday_year" name = "Bathide_y" id = "Birthind_y"> <option value = "" "> </option> </select> <span> year </span> </label> <select node-type =" Bathind_month "name =" Bathand_m "id =" bathange_m "> <"> <"> < </select> <span> month </span> </label> <label> <select node-type = "Bathing_month" name = "Bathing_d" id = "Birthded_d"> <option値= ""> </option> </select> <span>月</span> </span> </label> <ラベル> <node-type> value = ""> </option> </select> <span> day </span> </label> <入力タイプ= "hidden" name = "birth" value = "2016/2/12"> <label class = 'チェックボックスインラインテキストwarning warning id = "birth_error_info"> <iクラス
JSの実装は次のとおりです。
//変換を設定し、var date = new Date（）の誕生日を取得します。 var year = date.getTullyear（）; for（var i = year; i> = 1900; i-）{$（ "＃BARTHIND_Y"）。 } $（ '＃BARTHIND_Y'）。change（function（）{var hanth_year = $（ '＃batirnd_y'）。val（）; if（birts_year！= ""）{var hirth_month = $（ '＃bathind_m'）。 var birth_month = $（ '＃Birthind_m'）。val（）; if（birts_month！= ""）{if（（birts_year％4 == 0 && birth_year％100！= 0）||（birts_year％400 == 0）） ">" + 29 + "</option>"）; } else {"＃Birthday_m"）。 $（ '＃bashinde_m'）。change（function（）{var hanth_year = $（ '＃batirnd_y'）。val（）; var hirth_month = this.value; var birth_day = $（ '＃bathind_d'）。 "10"：case "12"：if（birth_day == ""）{"＃batirnd_d"）。 "</option>"） 「</option>」 if（birth_day == ""）{$（ "＃BARTHIND_D"）オプション：last "）。attr（" value "））{case" 28 "：$（"＃batirnd_d "）。 option [value = '31 '] "） $（ "＃Birthday_d"）。 $（bathing_d option [value = '31 ']）。 BREAK：BREAK; $（birthday_d "） b_month = date1.getMonth（）+1; $（ "＃Birthind_m"）。append（ "<option value =" + i + " + i +" </option> "）; 12：（var i = 1; i <= 31; i ++）{"＃Birthind_d"）。 i ++）{$（ "＃Birthday_d"）。 $（ "＃Birthday_d"） ：break; "＃Birthday_d"） b_day = $（ '＃Birthday_d'）。 $（ '＃birth'）。val（ ""）;まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。