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

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

ただいまの
回答率

88.82%

Javascrptでのタグ挿入

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 477

Nitta

score 88

お世話になってます。
今、selectタグで選択後、それに応じてoptionタグを
変化させたいのですが、上手くいきません!
何処が悪いのでしょうか?

お分かりの方居られましたら、ご教示下さい。

JS

function select_city(){

obj=document.form1.pref;
target2=obj.selectedIndex;

switch (target2) {
  case 1:
    var city=[松山市,今治市,新居浜市,西条市,四国中央市];    
    break;
  case 2:    
    var city=[徳島市,鳴門市,小松島市,阿南市,三好市];    
    break;
  case 3:    
    var city=[高松市,坂出市,丸亀市,観音寺市,東かがわ市];  
    break;
}  

for(var i = 0; i< city.length; i++){  
target=document.getElementById("city");
var option_add=document.createElement("option");  
option_add.setAttribute("value", i);
option_add.innerHTML=city[i];
target.appendChild(option_add); 

}

}  


HTML

<!-- wp:html -->
<form name="form1" action="">
<!-- wp:html -->
<p style="width:400px; height:30px">住 所</p>
<!-- /wp:html -->

<!-- wp:html -->
<select id="pref" name="pref" style="border:1px solid #F9F; width:200px; height:30px" onChange="select_city();">
<option>-----</option>
<option>愛媛県</option>
<option>徳島県</option>
<option>香川県</option>
<option>高知県</option>
</select>
<!-- /wp:html -->

<p style="width:400px; height:30px"></p>
<p><select id="city" name="city" style="width:400px; height:30px"></select></p>

</form>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

とりあえず引用符が足りていないです。

// var city=[徳島市,鳴門市,小松島市,阿南市,三好市];
   var city=['徳島市','鳴門市','小松島市','阿南市','三好市'];

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/31 09:07

    ありがとうございました!
    見事に入りました。
    気が付きませんでした(´;ω;`)

    また、よろしくお願いします。

    キャンセル

+2

既に解決済み・・・ということではありますが、今後のために「こういうことも気を付けてほしい」
といった観点で回答を残しておきます。

コードフォーマットしよう

コードですが、インデントがあまりないため、{と}の対応部分などが見えづらくなっています。
HTMLもですね。なるべくコードフォーマット機能のついたエディターを使われたほうが良いです。
Web上に(個人含め)簡易フォーマットサービスもあるのでご利用ください。
※「言語名 整形 フォーマット」などで検索

<!-- wp:html -->
<form name="form1" action="">
  <!-- wp:html -->
  <p style="width:400px; height:30px">住 所</p>
  <!-- /wp:html -->
  <!-- wp:html -->
  <select id="pref" name="pref" style="border:1px solid #F9F; width:200px; height:30px" onChange="select_city();">
    <option>-----</option>
    <option>愛媛県</option>
    <option>徳島県</option>
    <option>香川県</option>
    <option>高知県</option>
  </select>
  <!-- /wp:html -->
  <p style="width:400px; height:30px"></p>
  <p>
    <select id="city" name="city" style="width:400px; height:30px"></select>
  </p>
</form>
function select_city() {

    obj = document.form1.pref;
    target2 = obj.selectedIndex;

    switch (target2) {
        case 1:
            var city = [松山市, 今治市, 新居浜市, 西条市, 四国中央市];
            break;
        case 2:
            var city = [徳島市, 鳴門市, 小松島市, 阿南市, 三好市];
            break;
        case 3:
            var city = [高松市, 坂出市, 丸亀市, 観音寺市, 東かがわ市];
            break;
    }

    for (var i = 0; i < city.length; i++) {
        target = document.getElementById("city");
        var option_add = document.createElement("option");
        option_add.setAttribute("value", i);
        option_add.innerHTML = city[i];
        target.appendChild(option_add);

    }

}

インデントがきれいなコードは読みやすくなるし、デバッグもしやすくなります。

デバッグをしよう

まずはエラー確認です。

大抵のブラウザには「デベロッパーツール」という機能がついています。
ChromeであればF12です。
まず手始めにConsoleにエラーが出ていないか確認します。

今回だとセレクトボックスのonchangeでエラーが確認できました。
イメージ説明

通常、プログラミングのコードは特にコード中の全角スペースはNGですが、
変数名などに全角を使えたりします。JavaScriptもその仕様があります。

だから日本語でジャンジャン定義していこう・・・!というというわけじゃなく、好ましくないというのがプログラマ観点からの意見です。

特に今回の質問者さんのコードのように「文字列で判定している場合」に混乱が起きます。
変数、関数名などは半角英数で意味のある名前をつけましょう。
(簡単な英語が見つからずGoogle翻訳で得た難しい英語を突っ込むくらいならローマ字記法で良いと個人的には思います)
中には大文字と小文字を大別しない機能のある言語もありますが、「大文字小文字も別物」として、完全に一致するものを利用したほうが良いでしょう。

若干、それましたが、エラーが確認出来たらエラーメッセージで調査をします。
英語で出ていますが難解な英語であることは少ないですし、さいあく、Google翻訳にかければそれなりに分かりやすい日本語にしてくれます。

ではエラーが出ていなかった場合はどうすればいいかですが、「エラーが出ていないの思う通り動かない」というのは結構よくあることで、その場合はプログラムのロジック(組み方や処理の順番)に問題があることが多いです。
これはケースバイケースなので、試行錯誤(trial and error)をしていくしかないのですが、
「どこまで処理が通っているのか」を確認する側のデバッグが必要になります。

下記のような記事を参考にしてみてください。

・ブレークポイントを貼る
・console.log()で変数を確認する

が主なやり方ですね。

いずれもデベロッパーツールを利用することとなりますが、
きちんと活用できるようになるとそれだけで自己解決できることが増えてきますし、
質問する際も回答が得やすくなります。

※個人的にはHello Worldの次くらいにはデバッグを覚えてほしいと願っています・・・


参考まで。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/03 11:44

    返信ありがとうございます。
    中々、詳細な説明で参考にします。
    バグは良く確認します。

    今後ともよろしくお願いいたします。

    キャンセル

  • 2019/06/03 11:46

    バグというより「デバッグ」という言葉で覚えてください。
    現象の確認、変数の確認、処理分岐の確認などなど ですね。

    キャンセル

+1

まず、 switch で var city=[松山市,今治市,新居浜市,西条市,四国中央市]; としていますが、これらは文字列なので、 var city=["松山市", "今治市", "新居浜市", "西条市", "四国中央市"]; としてあげましょう!

うまくいってない部分は for 以下ですかね?

for(var i = 0; i< city.length; i++){  
  target = document.getElementById("city");
  var option_add = document.createElement("option");  
  option_add.setAttribute("value", i);
  option_add.innerHTML=city[i];
  target.appendChild(option_add); 
}  

特に大きく触っていないので、見比べていただくとどう違うのかわかると思います!!

最後に全体図を載せておきますね。

function select_city(){

  obj=document.form1.pref;
  target2=obj.selectedIndex;

  switch (target2) {
    case 1:
      city = ['松山市', '今治市', '新居浜市', '西条市', '四国中央市'];
      break;
    case 2:    
      city = ['徳島市', '鳴門市', '小松島市', '阿南市', '三好市'];
      break;
    case 3:    
      var city = ['高松市','坂出市','丸亀市','観音寺市','東かがわ市'];  
      break;
  }

  for(var i = 0; i< city.length; i++){  
    target = document.getElementById("city");
    var option_add = document.createElement("option");  
    option_add.setAttribute("value", i);
    option_add.innerHTML=city[i];
    target.appendChild(option_add); 
  }  
}

わかりづらいところがあれば追加で質問投げてください 🙇‍♂️

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/31 09:22

    返信ありがとうです!
    間抜けなミスです(笑)

    今後とも宜しくお願いします。

    キャンセル

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

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る