Блог

У меня есть javascript, который управляет отображением базы DIV в выпадающем списке выбора другого DIV. В первом выпадающем списке есть список из одного, нескольких и ни одного. Когда выбрано значение single, я хочу, чтобы оно изменило второй выпадающий список DIV на single, когда несколько выбранных должны сделать его множественным, а когда выбрано значение none, оно должно изменить его на single select. Ниже приведен мой код:

 
<script type="text/javascript">
    function setSecondDropdown(){
let firstDrop = document.getElementById("blocation");
let text = firstDrop.options[firstDrop.selectedIndex].text;
let secondDrop = document.getElementById("subtype");
document.getElementById("subtypeDiv").style.display = "block";}
</script>

<!--- First DIV ------->
                  <div>
                        <label for="sampleRecipientInput">How many physical locations you have *</label>
                        <div class="ss-custom-select">
                            <select class="full-width" id="blocation" name="blocation" onchange="setSecondDropdown()">
                                <option value="" disabled selected hidden>Select the number of physical location</option>
                                
                                <option value="One">One</option>
                                <option value="Multiple">Multiple</option>
                                <option value="Online">None (ex. online only)</option>
                            </select>
                        </div>  
                            <p id = "displayLocationError" style="color: red"></p>                              
                  </div>

<!----- Second DIV ------->
                  <div>
                        <label for="sampleRecipientInput">Subtype of business?</label>
                        <div class="ss-custom-select" id="subtypeDiv" style="display: none;">
                            <select class="full-width" id="subtype" name="subtype[]" multiple="false">
                                
                                <option value=""  disabled selected hidden>Select the subtype of business</option>
                                    </select>
                        </div>      
                            <p id = "displaySubTypeError" style="color: red"></p>                   
                                
                  </div>
  

Возможно, я неправильно понял вашу проблему. Вот мое предложение, поправьте меня, хотелось бы чего-то еще.

Удалите onchange=»setSecondDropdown()» и используйте приведенный ниже код

 const firstD=document.getElementById('blocation');
const secDiv= document.getElementById('subtypeDiv');
const secondD= document.getElementById('subtype');

firstD.addEventListener('change',()=>{
  secDiv.style.display='block';

  switch(firstD.options[firstD.selectedIndex].value){
    case 'One':
      secondD.removeAttribute('multiple');
      break;
    case 'Multiple':
      secondD.setAttribute('multiple','true');
      break;
    case 'Online':
      secondD.removeAttribute('multiple');
      break;
  }
});
  

Проверьте ссылку, указанную в комментарии!