82293


お住まいの場所によって変動する複数の選択肢を、formでメール送信できるページを作ろうとしています  
送って欲しい情報は「名前」「メールアドレス」「お住まい」「第一希望」「第二希望」です

例Aの人）  
お住まい：東京  
第一希望：①②③（3つの選択肢から選べる  
第二希望：①②③（3つの選択肢から選べる

例Bの人）  
お住まい：大阪  
第一希望：③④⑤（３つの選択肢から選べる  
第二希望：③④⑤（３つの選択肢から選べる

セレクトボックスも表示されるのですが、  
タイトル記載の通り、で閉じる位置によってセレクトボックスの中が空白になります

暫く奮闘しましたが、判らなかったのでお知恵を拝借させて頂けないでしょうか

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Sample</title>
    
    <link href="modal-multi.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <!--[if lt IE 9]>
    <script src="./js/html5.js" type="text/javascript"></script>
    <![endif]-->
    
    </head>
    <body>
    
    <!-- Crayon Syntax Highlighter v_2.7.2_beta -->
    <!-- [Format Time: 0.0002 seconds] -->
    
    
    <div id="wapper" class="clearfix">
    <hgroup id="site-title">
    <div id="logo">
    <!-- メールフォーム -->
    <body bgcolor="black"text="silver" overflow: hidden;">
    <br><br>
    <div id="formWrap">
    
    <form method="post" action="mail01.php">
    <table class="formTable">
    <tr><td><font size="2">お名前
          <td><input size="35" type="text" name="お名前" /><font size="2">※必須</td></tr>
    <tr><td><font size="2">Mail
          <td><input size="35" type="text" name="Email" /> <font size="2">※必須</td></tr>
    <tr><td>
    
    </table>
    
    
    <!--ココに</form>があればセレクトボックスは問題なく表示されるが、下記の希望の日時が送れない事になる-->
    
    
    <Div Align="left">
    <div class="result">
    <select id="selPref" style="width:250px;margin:15px;" onchange="selPref(this);"></select><br><br>
    <font size="2">
    ●第一希望の日時
    <select id="selCity" style="width:250px;margin:15px;"></select><br>
    ●第二希望の日時
    <select id="selCityy" style="width:250px;margin:15px;"></select><br>
    ●第三希望の日時
    <select id="selCityyy" style="width:250px;margin:15px;"></select><br>
    </div>
    
    
    
    <p align="center">
    <input type="submit" value="　 確認 　" />　<input type="reset" value="リセット" />
    </p></form></div>
    
    
    
    
    </body>
    
    <script>//選択
    var arr = [
    {cd:"", label:"住所を選択"},
    {cd:"13", label:"東京都"},
    {cd:"30", label:"埼玉県、千葉県"},
    
    ];
    
    //市区の選択肢
    var arrTokyo = [
    {cd:"", label:"希望の日時を選択"},
    {cd:"1", label:"10月10日 日曜日 ①9:00~15:00"},{cd:"2", label:"10月10日 日曜日 ②15:00~21:00"},{cd:"3", label:"10月23日 土曜日 ①9:00~15:00"},
    {cd:"4", label:"10月23日 土曜日 ②15:00~21:00"},{cd:"5", label:"10月24日 日曜日 ①9:00~15:00"},{cd:"6", label:"10月24日 日曜日 ②15:00~21:00"}　　];
    
    var arrSaitamachiba = [
    {cd:"", label:"希望の日時を選択"},
    {cd:"1", label:"10月23日 土曜日 ①9:00~15:00"},{cd:"2", label:"10月23日 土曜日 ②15:00~21:00"},
    {cd:"3", label:"10月24日 日曜日 ①9:00~15:00"},{cd:"4", label:"10月24日 日曜日 ②15:00~21:00"},   ];
    
    
    
    window.onload=function(){
    for(var i=0;i<arr.length;i++){
    let op = document.createElement("option");
    op.value = arr[i].cd;
    op.text = arr[i].label;
    document.getElementById("selPref").appendChild(op);
      }
    }
    
    //都府県が選択された時に呼び出される処理
    function selPref(obj){
      var targetArr;
    if(obj.value == "13"){targetArr = arrTokyo;}
    else if(obj.value == "30"){targetArr = arrSaitamachiba;}
    
    
    
    
    else{targetArr = new Array();}
    
      var selObj = document.getElementById('selCity');
      while(selObj.lastChild){
        selObj.removeChild(selObj.lastChild);
      }
      for(var i=0;i<targetArr.length;i++){
        let op = document.createElement("option");
        op.value = targetArr[i].cd;
        op.text = targetArr[i].label;
        selObj.appendChild(op);
      }
    
      var selObj = document.getElementById('selCityy');
      while(selObj.lastChild){
        selObj.removeChild(selObj.lastChild);
      }
      for(var i=0;i<targetArr.length;i++){
        let op = document.createElement("option");
        op.value = targetArr[i].cd;
        op.text = targetArr[i].label;
        selObj.appendChild(op);
      }
    
      var selObj = document.getElementById('selCityyy');
      while(selObj.lastChild){
        selObj.removeChild(selObj.lastChild);
      }
      for(var i=0;i<targetArr.length;i++){
        let op = document.createElement("option");
        op.value = targetArr[i].cd;
        op.text = targetArr[i].label;
        selObj.appendChild(op);
      }
    
    }
    </script>
    </html>
    
[/code]

●追加情報

回答して頂いた方の助言をもとに、開発者ツールのコンソールを調べました  
出ていたエラーは下記の通りでした

①0011.html:47 Uncaught TypeError: selPref is not a function  
at HTMLSelectElement.onchange (0011.html:47)

これらの情報をもとに並行して自身でも調べてみますが、もしお分かりなる方が居るようでしたら、助言、お知恵を拝借させて頂けると助かります  
宜しくお願いします


CC BY-SA 4.0
2021-09-06T07:31:42.923
82286
2021-09-07T04:42:36.800
2021-09-06T13:48:22.267
4236
48086
question
html
</form>タグの位置によってセレクトボックスの中が表示されなくなる

[code]

    <select id="selPref" style="width:250px;margin:15px;" onchange="selPref(this);"></select><br><br>
    
[/code]

解決策はいくつかありますが、簡単なのは **関数`selPref()` の名前をなにか別のものに変える**ことです。

古風な `onchange` 属性ではなく、`addEventListener()` を使うことでも直ります。この場合は関数名を変える必要はありません。

[code]

    document.querySelector('#selPref').addEventListener('change', selPref);
    //都府県が選択された時に呼び出される処理
    function selPref(event){
      let obj = event.target;
    
[/code]

* * *

解説:

`onchange` など、on〜 によるイベントハンドラのコードでは、シンボルの検索順序が通常と異なります。`selPref`
というシンボルがあって、ターゲット要素が`<form>`と繋がっていない場合、

  1. `this.selPref` (thisはHTMLSelectElementで、`this.selPref`は存在しない)
  2. `window.selPref` (これが関数)

この順番で検索されるので、意図通り `selPref()` 関数が呼ばれます。

ターゲット要素が`<form>`と繋がっている場合は順序が変わり、

  1. `this.selPref`
  2. `this.form.selPref`
  3. `window.selPref`

になります。`this.form` は繋がっている `<form>` で、HTMLFormElement には繋がっている要素の `name` 属性値と
`id` 属性値のプロパティが自動的に付与されるので、2番目の `this.form.selPref` は `<select id="selPref"
...>` を指すことになります。よって、「`selPref` は関数ではない」というエラーになるわけです。


CC BY-SA 4.0
2021-09-06T13:24:58.520
82293
2021-09-06T13:24:58.520
3475
82286
answer