回答編集履歴

コメントの不備を修正

2021/01/30 22:49

投稿

Twoshi

スコア354

test CHANGED Viewed

@@ -496,7 +496,7 @@
       const pets = document.getElementsByName('pet');
-      // 選択中のラジオボタンの値を取得
+      // 選択中のペットの値を取得
       const pet = getSelectedValue(pets, 'checked');

追記2を追加

2021/01/30 22:48

投稿

Twoshi

スコア354

test CHANGED Viewed

@@ -333,3 +333,251 @@
 ```
+追記2
+---
+データ送信せず画面に表示するということであれば以下のようになるかと思いますがいかがでしょうか？
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <form action="#">
+    <table border="0" cellspacing="0" cellpadding="0">
+      <tr>
+        <th>猫or犬</th>
+        <td>
+          <input type="radio" name="pet" value="as" onchange="createAgeSelectList()" checked>
+          猫
+          </input>
+          <input type="radio" name="pet" value="ad" onchange="createAgeSelectList()">犬</input>
+        </td>
+      </tr>
+      <!--上記の選択内容によってoption value選択肢を変更する-->
+      <br>
+      <tr>
+        <th>年齢</th>
+        <td>
+          <select name="age" id="age"></select>
+        </td>
+      </tr>
+    </table>
+    <button type="button" onclick="onClickInput()">入力</button>
+  </form>
+  <div id="output"></div>
+  <script>
+    /** 猫年齢セレクトリスト */
+    const CAT_LIST = [
+      { value: 'dd', text: '0' },
+      { value: 'cd', text: '1' },
+      { value: 'bd', text: '2' },
+      { value: 'ad', text: '3' },
+      { value: 'zc', text: '4' },
+      { value: 'yc', text: '5' },
+      { value: 'xc', text: '6' },
+      { value: 'wc', text: '7' },
+      { value: 'vc', text: '8' },
+      { value: 'uc', text: '9' },
+      { value: 'tc', text: '10' },
+      { value: 'sc', text: '11' },
+      { value: 'rc', text: '12' },
+      { value: 'qc', text: '13' },
+      { value: 'pc', text: '14' }
+    ];
+    /** 犬年齢セレクトリスト */
+    const DOG_LIST = [
+      { value: 'dd', text: '0' },
+      { value: 'cd', text: '1' },
+      { value: 'bd', text: '2' },
+      { value: 'ad', text: '3' },
+      { value: 'zc', text: '4' },
+      { value: 'yc', text: '5' },
+      { value: 'xc', text: '6' },
+      { value: 'wc', text: '7' },
+      { value: 'vc', text: '8' },
+      { value: 'uc', text: '9' },
+      { value: 'tc', text: '10' },
+      { value: 'sc', text: '11' },
+      { value: 'rc', text: '12' },
+      { value: 'qc', text: '13' }
+    ];
+    /** 初期表示処理 */
+    window.onload = function () {
+      createAgeSelectList();
+    };
+    /** 年齢セレクトリスト生成 */
+    function createAgeSelectList() {
+      const pets = document.getElementsByName('pet');
+      // 選択中のラジオボタンの値を取得
+      const pet = getSelectedValue(pets, 'checked');
+      const targetList = pet === 'as' ? CAT_LIST : DOG_LIST;
+      const age = document.getElementById('age');
+      // 表示中のセレクトリストの子要素を削除
+      while (age.lastChild) {
+        age.removeChild(age.lastChild)
+      }
+      // セレクトリスト子要素を追加
+      targetList.forEach(i => {
+        const option = document.createElement('option');
+        option.setAttribute('value', i.value);
+        option.textContent = i.text;
+        age.appendChild(option);
+      })
+    };
+    /** 入力ボタン押下時処理 */
+    function onClickInput() {
+      const pets = document.getElementsByName('pet');
+      // 選択中のペットの値を取得
+      const pet = getSelectedValue(pets, 'checked');
+      const ageList = document.getElementsByName('age');
+      // 選択中の年齢の値を取得
+      const age = getSelectedValue(ageList[0], 'selected');
+      const output = document.getElementById('output');
+      // 結果を表示
+      output.textContent = pet + age;
+    }
+    /** 選択中の値を取得 */
+    function getSelectedValue(nodeList, decitionItemName) {
+      for (let i = 0; i < nodeList.length; i++) {
+        if (nodeList[i][decitionItemName]) {
+          return nodeList[i].value;
+        }
+      }
+    }
+  </script>
+</body>
+</html>
+```
+ご参考になれば幸いです。

動作確認用に使用したソースを追加しました。

2021/01/30 22:42

投稿

Twoshi

スコア354

test CHANGED Viewed

@@ -67,3 +67,269 @@
 ```
 上記のようにするのはいかがでしょうか？
+追記
+---
+問題なく動作しているソースを記入しておきます。
+ご参考になれば幸いです。(一部ソースの記述変更していますがm(_ _)m)
+画面側
+```HTML
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <form action="http://localhost:7071/api/test" method="GET"> ←例のため記載しておきます。送信先は適宜変更してください。
+    <table border="0" cellspacing="0" cellpadding="0">
+      <tr>
+        <th>猫or犬</th>
+        <td>
+          <input type="radio" name="pet" value="as" onchange="createAgeSelectList()">
+          猫
+          </input>
+          <input type="radio" name="pet" value="ad" checked onchange="createAgeSelectList()">犬</input>
+        </td>
+      </tr>
+      <!--上記の選択内容によってoption value選択肢を変更する-->
+      <br>
+      <tr>
+        <th>年齢</th>
+        <td>
+          <select name="age" id="age"></select>
+        </td>
+      </tr>
+    </table>
+    <button>入力</button>
+  </form>
+  <script>
+    /** 猫年齢セレクトリスト */
+    const CAT_LIST = [
+      { value: 'dd', text: '0' },
+      { value: 'cd', text: '1' },
+      { value: 'bd', text: '2' },
+      { value: 'ad', text: '3' },
+      { value: 'zc', text: '4' },
+      { value: 'yc', text: '5' },
+      { value: 'xc', text: '6' },
+      { value: 'wc', text: '7' },
+      { value: 'vc', text: '8' },
+      { value: 'uc', text: '9' },
+      { value: 'tc', text: '10' },
+      { value: 'sc', text: '11' },
+      { value: 'rc', text: '12' },
+      { value: 'qc', text: '13' },
+      { value: 'pc', text: '14' }
+    ];
+    /** 犬年齢セレクトリスト */
+    const DOG_LIST = [
+      { value: 'dd', text: '0' },
+      { value: 'cd', text: '1' },
+      { value: 'bd', text: '2' },
+      { value: 'ad', text: '3' },
+      { value: 'zc', text: '4' },
+      { value: 'yc', text: '5' },
+      { value: 'xc', text: '6' },
+      { value: 'wc', text: '7' },
+      { value: 'vc', text: '8' },
+      { value: 'uc', text: '9' },
+      { value: 'tc', text: '10' },
+      { value: 'sc', text: '11' },
+      { value: 'rc', text: '12' },
+      { value: 'qc', text: '13' }
+    ];
+    /** 初期表示処理 */
+    window.onload = function () {
+      createAgeSelectList();
+    };
+    /** 年齢セレクトリスト生成 */
+    function createAgeSelectList() {
+      // 選択中のラジオボタンを取得
+      const pets = document.getElementsByName('pet');
+      let pet;
+      for (let i = 0; i < pets.length; i++) {
+        if (pets[i].checked) {
+          pet = pets[i].value;
+          break;
+        }
+      }
+      const targetList = pet === 'as' ? CAT_LIST : DOG_LIST;
+      const age = document.getElementById('age');
+      // 表示中のセレクトリストの子要素を削除
+      while (age.lastChild) {
+        age.removeChild(age.lastChild)
+      }
+      // セレクトリスト子要素を追加
+      targetList.forEach(i => {
+        const option = document.createElement('option');
+        option.setAttribute('value', i.value);
+        option.textContent = i.text;
+        age.appendChild(option);
+      })
+    };
+  </script>
+</body>
+</html>
+```
+動作確認のため、使用したAPI側(Azure Functionsを利用。ご参考までに...)
+受け取り側で送信されてきた文字列を連結してあげれば、良いと思いました。
+```Typescript
+import { AzureFunction, Context, HttpRequest } from "@azure/functions"
+const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
+    const { pet, age } = req.query;
+    if (!pet || !age) {
+        context.res = {
+            status: 400,
+            body: "ペットまたは年齢が選択されていません。"
+        };
+        return;
+    }
+    context.res = {
+        status: 200,
+        body: pet + age // このように受け取り側で文字列を連結してあげれば良いのではと思っています。
+    };
+};
+export default httpTrigger;
+```

回答コメントの追加

2021/01/30 16:58

投稿

Twoshi

スコア354

test CHANGED Viewed

@@ -1,6 +1,8 @@
 受信側で文字列の結合は必要ですが、
 valueを変更いただくことで選択内容に合わせて受信いただけると思います。
+(Javascriptを利用しないですが,,,)

インデント修正

2021/01/30 05:57

投稿

Twoshi

スコア354

test CHANGED Viewed

@@ -52,7 +52,7 @@
 ```html
-<select name="CATage" onChange="number02()">
+        <select name="CATage" onChange="number02()">
           <option value="dd">0</option>

回答内容の修正

2021/01/30 05:38

投稿

Twoshi

スコア354

test CHANGED Viewed

@@ -1,245 +1,67 @@
+受信側で文字列の結合は必要ですが、
-画面の結果表示については、先のコメントで質問させていただいた内容とは異なりご質問のソースのまま表示するようにしました。
+valueを変更いただくことで選択内容に合わせて受信いただけると思います。
-結果を画面に表示させるソースとして以下でいかがでしょうか？
+ラジオボタンについては、猫のvalue="as" 犬のvalue="ab"
 ```html
-<!DOCTYPE html>
+          <label>
-<html>
+            <input
-  <head>
+              type="radio"
-    <meta charset="UTF-8">
+              name="cat"
-  </head>
+              value="as"
-  <body>
+              checked="checked"
-    <form action="#">
+              onclick="entryChange1()"
-      <table border="0" cellspacing="0" cellpadding="0">
+            />猫
-        <tr>
+          </label>
-          <th>猫or犬</th>
+          <label>
-          <td>
+            <input
-            <label>
+              type="radio"
-              <input
+              name="cat"
-                type="radio"
+              value="ab"
-                name="cat"
-                value="neko"
-                checked="checked"
+              onclick="entryChange1()"
-              />猫
-            </label>
-            <label>
-              <input
-                type="radio"
-                name="cat"
-                value="inu"
-              />犬
-            </label>
-          </td>
-        </tr>
-        <!--上記の選択内容によってoption value選択肢を変更する-->
-        <!--猫を選択した場合-->
+            />犬
-        <br>
-        <tr id="CATp">
-          <th>年齢</th>
-          <td>
-            <select name="CATage">
-              <option value="0">0</option>
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-              <option value="11">11</option>
-              <option value="12">12</option>
-              <option value="13">13</option>
-              <option value="14">14</option>
-            </select>
-          </td>
-        </tr>
-        <!--犬を選択した場合-->
-        <tr id="dogPO">
-          <th>年齢</th>
-          <td>
-            <select name="DOGage">
-              <option value="0">0</option>
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-              <option value="11">11</option>
-              <option value="12">12</option>
-              <option value="13">13</option>
-            </select>
-          </td>
-        </tr>
-      </table>
+          </label>
-      <button type="button" onclick="number02()">入力</button>
-    </form>
-    <script>
-    function number02() {
-      // 選択中のペットを取得
-      const cats = document.getElementsByName('cat');
-      let pet;
-      for (let i = 0; i < cats.length; i++) {
-        if (cats[i].checked) {
-          pet = cats[i].value;
-          break;
-        }
-      }
-      // 選択中の年齢を取得
-      const select = document.getElementsByName('CATage');
-      let age;
-      for (let i = 0; i < select[0].length; i++) {
-        if (select[0][i].selected) {
-          age = select[0][i].value;
-          break;
-        }
-      }
-      if(pet === "neko" && age === 0) {
-          document.write("asdd");
-      }
-    }
-    </script>
-  </body>
-</html>
 ```
-修正内容
+セレクトリストについては、0のvalue="dd" 1のvalue="cd"
----
+```html
+<select name="CATage" onChange="number02()">
+          <option value="dd">0</option>
-・ラジオボタンのvalueが"猫""犬"となっていましたので、表示判定のif文に合わせ"neko""inu"と変更いたしました。
+          <option value="cd">1</option>
-・入力ボタンを契機にして、結果を表示するということでしたので、猫のselectタグにあったnumber02関数をbuttonタグに移動しています。また、buttonタグにtype指定がなかったため、type="button"としています。
+          // 以下略
-・number02関数内の処理を変更しました。
+        </select>
- 今回のソースでは、selectタグinputタグそれぞれにnameが指定されていましたので、nameからNodeを取得し、選択されているvalueを取得するようにしています。それぞれ選択肢が複数存在するため、inputタグでは選択中のcheckedを確認、selectタグでは選択中のselectedを確認し対象の値を取得しています。
+```
-　表示条件については、それぞれの選択で取得したvalueを元に比較しています。
-ご参考になれば幸いです。
+上記のようにするのはいかがでしょうか？