STEP 6-4

サンプルアプリケーションを作成してみよう

 次にAJAXを使用して実際のアプリケーションで使えそうな仕組みを作ってみましょう。

 題材は、都道府県を選択すると市区町村が変化するセレクトボックスです。それぞれのセレクトボックスの選択肢(optionタグ)は、JavaScriptで動的に作成します。

 動作するものは以下のURLに配置してあるので動きを確認してみてください。

 今まで試していたAJAXの内容とは違う新たな内容を始めるので、これまで利用していたworkdirとは別のフォルダを作成してください。今後はその新たなフォルダをworkdirと呼びます。

 まずworkdir内にリスト6-4-01のHTMLファイルを作成しましょう。

6-4-01 index.html

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8"></meta> ...

Get ステップアップJavaScript フロントエンド開発の初級から中級へ進むために now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.