複数のプルダウンメニューに紐づくボタンの活性化について

Question

複数あるプルダウンメニューを操作したら
非活性になっているボタンを活性化したい。
１つに対してはできたが、プルダウンとボタンをforで増やした時に
各プルダウンと紐づくボタンを指定する方法がわからない。

<select @change= "changeselect">
  <option value='' disabled selected style='display:none'>選択してください</option>
  <option value='1' >1</option>
  <option value='2' >2</option>
  <option value='3' >3</option>
<select/>
<button id='buttonid' type='submit' disabled>送信</button>

changeselect {
      document.getElementById('changeselect').disabled = false
    }

Comments

[yambejp]

ピュアなjsの話ではないですよね？
お使いのライブラリを明示ください

Answer 1

required 属性をつけて

<select required="required">

document.addEventListener('change', function(event) {
  const target = event.target;
  if (target.nodeName.toLowerCase() !== 'select') {
    return true;
  }

  target.nextElementSibling.disabled = !target.checkValidity();
}, false);

https://developer.mozilla.org/ja/docs/Web/HTML/Element/select#attr-required
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Form_validation

Answer 2

指定がとくにないのでとりあえず普通のjsでかきます

Comments

[yambejp]

<script>
function changeselect(){
var flg=[...document.querySelectorAll('.s1')].filter(x=>x.value=="").length>0;
document.querySelector('#buttonid').disabled=flg;
}
</script>
<select onchange= "changeselect()" class="s1">
<option value='' selected>選択してください</option>
<option value='1' >1</option>
<option value='2' >2</option>
<option value='3' >3</option>
<select/>
<select onchange= "changeselect()" class="s1">
<option value='' selected>選択してください</option>
<option value='1' >1</option>
<option value='2' >2</option>
<option value='3' >3</option>
<select/>
<select onchange= "changeselect()" class="s1">
<option value='' selected>選択してください</option>
<option value='1' >1</option>
<option value='2' >2</option>
<option value='3' >3</option>
<select/>
<button id='buttonid' type='submit' disabled>送信</button>