この記事では、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
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。