お世話になります。
掲題のように、選択肢によってJqueryを利用して動的に次の選択肢を変化表示させるコードを作成しております。下記のようにhideとshowで隠すまたは表示するような動きは作ることができたのですが、一部の情報を見ているとブラウザによっては非推奨の方法であるとのご意見もありました。実際には許可しない組み合わせや操作を防ぐvalidationの目的では問題ないように思えたのですが
【追記】
hide,showの非推奨の情報について、明確化致します。
ttp://www.tinybeans.net/blog/2016/03/07-151657.html
本サイトを参考にした際に、IEのブラウザでは意図した動作(隠れてはくれない)
との情報に基づくものです。
違う方法等を推奨するご意見や推奨されない理由をご教示願えますでしょうか?
HTML
1 <tr> 2 <td><label>カテゴリーを選択する</label></td> 3 <td><select id="lv1Pulldown" size="2" class="text"> 4 <option value="1">不動産</option> 5 <option value="2">その他</option> 6 </select> 7 </td> 8 9 <td><select id="lv2Pulldown" size="3" class="text" disabled="disabled"> 10 <option value="4" class="p1">賃貸</option> 11 <option value="5" class="p1">売買</option> 12 <option value="6" class="p2">その他</option> 13 </select> 14 </td> 15 16 <td><select id="lv3Pulldown" size="4" class="text" disabled="disabled"> 17 <option value="7" class="p4">マンション・アパート</option> 18 <option value="8" class="p4">戸建</option> 19 <option value="9" class="p4">土地(借地権)</option> 20 <option value="10" class="p4">その他</option> 21 <option value="11" class="p5">マンション・アパート</option> 22 <option value="12" class="p5">土地建物</option> 23 <option value="13" class="p5">土地</option> 24 <option value="14" class="p5">その他</option> 25 <option value="15" class="p6">その他</option> 26 </select> 27 </td> 28 </tr>
JavaScript
1<script type="text/javascript"> 2 $(document).ready(function(){ 3 var pd2 = $("#lv2Pulldown option").clone(); 4 var pd3 = $("#lv3Pulldown option").clone(); 5 $("#lv2Pulldown").hide(); 6 $("#lv3Pulldown").hide(); 7 8 $("#lv1Pulldown").change(function () { 9 var lv1Val = $("#lv1Pulldown").val(); 10 $("#lv2Pulldown").removeAttr("disabled"); 11 $("#lv2Pulldown option").remove(); 12 $(pd2).appendTo("#lv2Pulldown"); 13 $("#lv2Pulldown option[class != p"+lv1Val+"]").remove(); 14 $("#lv3Pulldown").attr("disabled", "disabled"); 15 $("#lv3Pulldown option").remove(); 16 $("#lv2Pulldown").show(); 17 }); 18 19 $("#lv2Pulldown").change(function () { 20 var lv2Val = $("#lv2Pulldown").val(); 21 $("#lv3Pulldown").removeAttr("disabled"); 22 $("#lv3Pulldown option").remove(); 23 $(pd3).appendTo("#lv3Pulldown"); 24 $("#lv3Pulldown option[class != p"+lv2Val+"]").remove(); 25 $("#lv3Pulldown").show(); 26 }); 27}) 28 </script>
回答2件
あなたの回答
tips
プレビュー