javascriptの変数に入れて展開したい

Question

『やったこと』
現在カテゴリ選択をできる機能を作成中になります

1,html領域にoptionタグでユーザーにfirstCategoliのvalueを決めてもらいます

後にfirstCategoliで選択したvalueが1の場合のみsecondCategoryをdisabled="anable"にしました

firstCategoryのvalueが2以上の場合はdisabled="disanable"になります

secondCategoryの初期値は disabled="disnable"になります

最後にsecondCategoryをab変数に入れて

Element.innerHTML = ab;で表示しております

ab変数はif文とinnerhtmlにより動的にoption情報が変動します

『問題点、質問点』
secondCategoryのoptionがサイトに表示されないです

ご指揮頂けると助かります

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

       <div>カテゴリ</div>

        <select name="firstCategoryName" id="firstCategoliId">
            <option value="1">レディース</option>
            <option value="2">  メンズ</option>
            <option value="3">ベビー・キッズ</option>
            <option value="4">小物</option>
        </select>

        <script type="text/javascript">

            var categoliDecision = document.getElementById("firstCategoliId");

            


              var ab ='<select name="secondCategory" id="secondCategory" disabled="disanable">'
                +
                +'<option value="1">トップス</option>'
                + '<option value="2"> ワンピース</option>'
                + '<option value="3">ベビー・キッズ</option>'
                + '<option value="4">小物・ゲーム</option>'
                +
                '</select>'



            if (categoliDecision == 1) {

                document.ab.innerHTML =

                    '<select name="secondCategory" id="secondCategory" disabled="anable">'
                    +
                    +'<option value="1">トップス</option>'
                    + '<option value="2"> ワンピース</option>'
                    + '<option value="3">ベビー・キッズ</option>'
                    + '<option value="4">小物・ゲーム</option>'
                    +
                    '</select>'


            } else {
                document.ab.innerHTML =

                    '<select name="secondCategory" id="secondCategory" disabled="disanable">'
                    +
                    +'<option value="1">リンゴ</option>'
                    + '<option value="2"> バナナ</option>'
                    + '<option value="3">ベビー</option>'
                    + '<option value="4">コップ</option>'
                    +
                    '</select>'

            }


            Element.innerHTML = ab;


        </script>

Comments

[miyabi_pudding]

何点か。

・document.writeは非推奨メソッドですので他の手法を検討された方がいいかと
・「うまくいきません」ではまったくわかりませんので、具体的に、どうしたいが、こうならない、などと記載してください。
・HTMLも記載してください。
・ソースコードは、コードブロックを使って記載してください。
```ここに言語を入力
コード
```
という形式です。

[nguyenseiji]

ご連絡ありがとうございます

サイド修正いたしましたので
ご確認いただければ幸いです

また修正する場所等ありましたら教えて頂けると助かります

[Lhankor_Mhy]

全部やり直しとか。
さすがにひどいと思うので低評価しました。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[nguyenseiji]

コメントありがとうございます。

まだちょっとうまくいっていないので現在調べ中です

お手数をおかけいたします

Answer 1

document.writeでhtmlを整形するのは百害あって一利なしなのでやめましょう
課題などよほどの理由があればその旨主張してください

Comments

[yambejp]

ちなみに単純なjsの文字列連結だとしてもselectとoptionが+で繋がれていないですね

[nguyenseiji]

ご連絡ありがとうございます
下記のコードのように修正しました
+でつなぐというのは下記のコードみたいな感じであっていますのでしょうか

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

var ab ='<select name="secondCategory" id="secondCategory" disabled="disanable">'
+
+'<option value="1">トップス</option>'
+ '<option value="2"> ワンピース</option>'
+ '<option value="3">ベビー・キッズ</option>'
+ '<option value="4">小物・ゲーム</option>'
+
'</select>'

[yambejp]

＋がダブっている箇所はだめです。
端的に書くと
var ab1 ='<select name="secondCategory" id="secondCategory" disabled="disanable">'
+'<option value="1">トップス</option>'
+ '<option value="2"> ワンピース</option>'
+ '<option value="3">ベビー・キッズ</option>'
+ '<option value="4">小物・ゲーム</option>'
+ '</select>'
console.log(ab1);

[yambejp]

これをヒアドキュメントでかくとこうできます
var ab2 =`<select name="secondCategory" id="secondCategory" disabled="disanable">
<option value="1">トップス</option>
<option value="2"> ワンピース</option>
<option value="3">ベビー・キッズ</option>
<option value="4">小物・ゲーム</option>
</select>`;
console.log(ab2);

[nguyenseiji]

+について完全に理解しました

ありがとうございます。

Answer 2

間違えている場所等ありましたら

var categoliDecision = document.getElementById("firstCategoliId");

if (categoliDecision == 1) {
//  ^ Elementが入っているはずなので真にならない
var ab = document.querySelector().innerHTML =
//                             ^ 引数がない

'<select name="secondCategory" id="secondCategory" disabled="disabled">'

'<option value="1">トップス</option>'
//^ + 忘れ
+ '<option value="2"> ワンピース</option>'
+ '<option value="3">ベビー・キッズ</option>'
+ '<option value="4">小物・ゲーム</option>'

'</select>'
//^ + 忘れ

}

document.write(ab);
//^ 不要 

質問の変更に合わせて追記

全部やり直しだなんて、ひどいと思いますよ。

        <div>カテゴリ</div>

        <select name="firstCategoryName" id="firstCategoliId">
            <option value="1">レディース</option>
            <option value="2">  メンズ</option>
            <option value="3">ベビー・キッズ</option>
            <option value="4">小物</option>
        </select>

        <script type="text/javascript">

            var categoliDecision = document.getElementById("firstCategoliId");


                  '<select name="secondCategory" id="secondCategory" disabled="disanable">'
                    +
//                  ^ + 多すぎ
                    +'<option value="1">トップス</option>'
                    + '<option value="2"> ワンピース</option>'
                    + '<option value="3">ベビー・キッズ</option>'
                    + '<option value="4">小物・ゲーム</option>'
                    +
                '</select>'



            if (categoliDecision == 1) {
//              ^ Elementが入っているはずなので真にならない

                var ab = document.innerHTML =
//                       ^ 未定義のプロパティ。element.innerHTML の間違いでは。

                    '<select name="secondCategory" id="secondCategory" disabled="anable">'
                    +
//                  ^ + 多すぎ
                    +'<option value="1">トップス</option>'
                    + '<option value="2"> ワンピース</option>'
                    + '<option value="3">ベビー・キッズ</option>'
                    + '<option value="4">小物・ゲーム</option>'
                    +
                '</select>'


            }else{var ab = document.innerHTML =
//                       ^ 未定義のプロパティ。element.innerHTML の間違いでは。

                    '<select name="secondCategory" id="secondCategory" disabled="disanable">'
                    +
//                  ^ + 多すぎ
                    +'<option value="1">リンゴ</option>'
                    + '<option value="2"> バナナ</option>'
                    + '<option value="3">ベビー</option>'
                    + '<option value="4">コップ</option>'
                    +
                '</select>'

                  }


            Element.innerHTML = ab;
//          ^ 不要


        </script>

Comments

[nguyenseiji]

ご連絡ありがとうございます

document.querySelector().innerHTMLに引数がないとご指揮頂きましたが

調べたと事引数にはcssを入れるとありましたが今回の場合はどのような引数
を入れるべきなのでしょうか

ご指揮頂ければ幸いです

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

[Lhankor_Mhy]

コードを変更したようなので不要です。

[nguyenseiji]

ご連絡ありがとうございます

全部やり直し申し訳ないです

サイドご提示いただいたコードを参考に
色々変更してみましたがうまくsecondcategoliが表示されないので
もう少し調べてみようと思います

ありがとうございます。

[nguyenseiji]

無事できました

ありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。