配列の中の名前を、クラス構文を使って、動的にセレクトボックスに入力させています。
しかし、途中で配列の名前を追加すると、それ以降にセレクトボックスを作成した場合、追加された配列が生かされますが、既に作成済みのセレクトボックスには、古い配列のままとなります。

列）
配列 = [a,b]として、これを入れたセレクトボックスを３つ作る。
その後、配列にcさんを加えて、さらにセレクトボックスを２つ作る。
そうすると５つのセレクトボックスの選択肢は以下の通りとなる。

a,b
a,b
a,b
a,b,c
a,b,c

これを、
a,b,c
a,b,c
a,b,c
a,b,c
a,b,c

としたい。
試行錯誤して、なんとか書かれているコードでこれは実現できました。
既存のセレクトボックスの中身を削除→新しい配列で作ったセレクトボックスを挿入

としています。

【質問の内容】
(1)
既存のセレクトボックスの削除ができてはいるのですが、書き方が正しくなく、
どのように書けばいいのかを教えていただきたいです。

javascript
1   //一度セレクトボックスを空にしないと、メンバーがどんどん追加されてしまう。
2      for(let i = 0; i < selectMember[item_j].options.length + 100; i++) {
3          selectMember[item_j].options[0]=null
4        }

(2)
セレクトボックスの作成をクラス構文で行っているのですが、
クラス構文に全く触れずに、別途関数を作って、セレクトボックスを削除して追加して強引にコードを書きました。
クラス構文を利用して、これと同じことはできないでしょうか？

html
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="utf-8">
6    <title>Tab Menu</title>
7    <link rel="stylesheet" href="styles.css">
8  </head>
9  <body>
10    <div class="container">
11      <ul class="menu">
12        <li><a href="#" class="active" data-id="participant_tab"></a></li>
13        <li><a href="#" data-id="item_tab"></a></li>
14        <li><a href="#" data-id="result_tab"></a></li>
15      </ul>
16
17<!--1）参加者--------------------------------------------->
18      <section class="content active" id="participant_tab">
19        
20        <div class="member_area">
21          <div class="subTitle">立て替えくれた人</div>
22          <div class="add_member_area">
23            <input type="text" id="memberName" placeholder="名前を入力">
24            <button id="memberAddBtn" class="disabled">追加</button>
25          </div>
26
27          <div class="member_list_table">
28          </div>
29          
30          <ul id="memberList">
31            <div>主催者(削除不可)</div>
32<!--
33              <li class="memberList_li">
34              <button class="delMember">'x'</button>
35              <div class="div_memberName">名前</div>
36              </li> 
37-->        
38          </ul>
39        </div>
40                
41      </section>
42<!--2）項目----------------------------------------------->      
43      <section class="content" id="item_tab">
44        <div class="add_item_btn_area">
45          <div>立て替え項目</div>  
46          <div id='itemBtnArea'>
47            <button id="itemAddBtn">項目を追加する</button>
48          </div>    
49
50          <div class="add_item"> 
51                        
52            <ul id="itemList">
53<!--
54              <li>
55                <button class="delMember">×</button>
56                <select class="selectMember">
57                  <option>テスト</option> 
58                  <option>テスト</option> 
59                </select>
60                  <input class="oneItemName" placeholder="項目">
61                  <input class="oneItemPrice" placeholder="金額">               
62              </li>
63-->
64            </ul>
65
66          </div>
67        </div>
68        <button id="testBtn">項目一覧のセレクトボックスに新しい参加者（配列）の名前を追加する</button>
69      </section>
70<!--3）計算結果----------------------------------------------->     
71      <section class="content" id="result_tab">
72       
73      </section>     
74    </div>
75   
76    <script src="main.js"></script>
77  </body>
78</html>

javascript
1'use strict';
2{
3
4//参加者タブ------------------------------------- 
5//★100)メンバー追加ボタンを押した時------ 
6  var memberListArray = ["主催者"];//  これを関数内に入れると、追加していけない。
7  const memberAddBtn = document.getElementById('memberAddBtn');//メンバー追加ボタン
8  const memberName_id = document.getElementById('memberName');//メンバー入力フォーム 
9  const memberList_id = document.getElementById('memberList');//メンバーリストを追加していくul要素のid
10
11
12// 110)メンバーを配列に加える
13  function addMemberListArray() {
14    memberListArray.push(memberName_id.value);
15    console.log(memberListArray);
16    memberName_id.value = '';//メンバーの入力欄をクリアする※これをどこに入れるで作動が変わる
17    memberName_id.focus();
18  }//addMemberListArray
19  
20  
21//  メンバーリストを管理
22  class DisplayMemberList{
23   constructor(){
24     this.lists=[];
25   } //constructor
26    
27    setup(){ //ulにliを追加していく
28      this.lists.forEach(index => {
29        memberList_id.appendChild(index.getli())
30      });     
31    }//setup
32    
33    //ボタンを押して一行追加する
34    go () {
35      this.lists.push(new MemberListOneColumn());
36      this.setup();
37//      console.log(this.lists);
38    }//go
39  }//displayMemberList class
40  
41
42  class MemberListOneColumn {//リストの一行を管理
43    constructor() {
44//      <li class="memberList_li">
45//      <button class="delMember">'x'</button>
46//      <div>名前</div>
47//      </li>
48      this.li = document.createElement('li');
49      this.li.classList.add('memberList_li');
50         
51      //deleteボタンの追加
52      const deleteBtn = document.createElement('button');
53      deleteBtn.classList.add('delMember');
54      deleteBtn.textContent = 'x';
55      this.li.appendChild(deleteBtn);
56      
57      //テキストの追加
58      const div_memberName = document.createElement('div');
59      div_memberName.classList.add('div_memberName')
60      div_memberName.textContent = memberName_id.value;  
61//      console.log(memberName_id.value);
62      this.li.appendChild(div_memberName);
63      
64      //削除ボタンを押した時       
65      deleteBtn.addEventListener('click', ()=> {
66        var idx=[].indexOf.call(memberList_id.querySelectorAll('li'),this.li);  
67        displayMemberList.lists.splice(idx,1);
68        memberList_id.removeChild(this.li);  
69        // 配列からもメンバーを削除する
70        memberListArray.splice(idx+1,1);
71        console.log(memberListArray)
72      });
73      
74    }//constructor
75    
76      getli(){
77        return this.li;
78      }//getli
79  }//MemberListOneColumn
80  
81  const displayMemberList = new DisplayMemberList();
82  memberAddBtn.addEventListener('click', () => {
83    if (memberName_id.value !==''){
84      memberAddBtn.classList.remove('disabled');
85    }else{ 
86      memberAddBtn.classList.add('disabled');
87    };
88    if (memberAddBtn.classList.contains('disabled') === true){
89      return;
90    }  
91    displayMemberList.go();//メンバーを一覧に表示させる
92    addMemberListArray();//110)メンバーを配列に加える
93       
94    
95//    checkMemberAreaBlank(); //101)名前の空欄チェック→110)メンバーを配列に加える
96  })//memberAddBtn.click
97  
98//項目タブ-----------------------------------------------------------
99  const itemAddBtn = document.getElementById('itemAddBtn') ;//メンバー追加ボタン
100  const itemList_id = document.getElementById('itemList');//メンバーリストを追加していくul要素のid
101  
102//  //  アイテムリストを管理
103  class DisplayItemList{
104    constructor(){
105      this.lists=[];
106    } //constructor
107
108    setup(){ //ulにliを追加していく
109      this.lists.forEach(index => {
110        itemList_id.appendChild(index.getli())
111      });     
112    }//setup
113
114    //ボタンを押して一行追加する
115    go () {
116      this.lists.push(new ItemListOneColumn());
117      this.setup();
118      console.log(this.lists);
119    }//go
120  }//displayMemberList class
121  
122  class ItemListOneColumn {//リストの一行を管理
123    constructor() {   
124      this.li = document.createElement('li');
125      this.li.classList.add('memberList_li');
126    
127      //セレクトボックス（メンバー名の追加）
128      const selectMember_tag = document.createElement('select');
129      selectMember_tag.classList.add('selectMember');
130        //セレクトボックスに追加する選択肢
131      for(var i=0;i<memberListArray.length;i++){
132        const optionMember_tag = document.createElement('option')
133        optionMember_tag.text = memberListArray[i];   //テキスト値
134        selectMember_tag.appendChild(optionMember_tag);
135      }      
136      this.li.appendChild(selectMember_tag);
137      
138      //金額入力項目の追加
139      const input_itemPrice = document.createElement('input');
140      input_itemPrice.classList.add('oneItemPrice');
141      input_itemPrice.placeholder = '金額'
142      this.li.appendChild(input_itemPrice);  
143        
144      });
145
146    }//constructor
147
148    getli(){
149      return this.li;
150    }//getli
151  }//MemberListOneColumn
152   
153  const displayItemList = new DisplayItemList();
154  itemAddBtn.addEventListener('click', () => {
155    displayItemList.go();//アイテムを一覧に表示させる
156  })//memberAddBtn.click
157  
158//テストボタン処理----------------------------------------------------------
159  const testBtn = document.getElementById('testBtn');
160  const selectMember = document.getElementsByClassName('selectMember')//該当の項目
161  testBtn.addEventListener('click',() => {
162
163 
164    for(let item_j = 0; item_j < selectMember.length; item_j++){
165      var idx = selectMember[item_j].selectedIndex;       //インデックス番号を取得
166      var who  = selectMember[item_j].options[idx].text;//選ばれている人の名前
167      
168        //一度セレクトボックスを空にしないと、メンバーがどんどん追加されてしまう。
169      for(let i = 0; i < selectMember[item_j].options.length + 100; i++) {
170          selectMember[item_j].options[0]=null
171        }
172      
173        // セレクトボックスに新しい配列の内容を入れる   
174        for(let i = 0; i < memberListArray.length; i++) { 
175          const option_tag = document.createElement('option')
176          option_tag.text = memberListArray[i]
177          selectMember[item_j].appendChild(option_tag);
178        }
179      
180        // もともとのテキストボックスの選択肢になるようにする
181      var options = document.getElementsByClassName('selectMember')[item_j].options;
182        for(var i = 0; i < options.length; i++){
183          console.log(options[i].text)
184          console.log(who)
185          if ( options[i].text === who ){
186            options[i].selected = true;
187            break;
188          };
189      }; 
190    }//項目の数だけループ   
191  });
192    
193}//javascript

行動規範の内容に同意します

回答1件

ベストアンサー

増えた場合はわかりますが、減ったときはどうするんでしょうか？
またa,bがb,aになった場合はどうするんでしょうか？
一部更新

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#btn').addEventListener('click',()=>{
4    var s=document.createElement('select');
5    var o=document.createElement('option');
6    o.textContent="--";
7    o.value="";
8    s.appendChild(o);
9    document.querySelector('#hoge').appendChild(s);
10    document.querySelector('#list').value.split(",").forEach(x=>{
11      var o=document.createElement('option');
12      o.textContent=x;
13      o.value=x;
14      s.appendChild(o);
15    });
16    Array.from(document.querySelectorAll('#hoge select')).forEach(x=>{
17      var cln=s.cloneNode(true);
18      cln.value=x.value;
19      /* もしくは cln.selectedIndex=x.selectedIndex; */
20      x.parentNode.insertBefore(cln,x);
21      x.parentNode.removeChild(x);
22    });
23  });
24});
25</script>
26<input type="text" id="list" value="a,b">
27<input type="button" value="add" id="btn">
28<div id="hoge"></div>