Добавление <input> в зависимости от выбора <select>

187

11 января 2019, 01:30

Есть такой код:

const authorNameLabel = document.createElement('div'); 
authorNameLabel.innerHTML = '<lable for="main-name">Фамилия автора</lable> <input name="main-name" id="main-name"/><lable>  Инициалы</lable> <input /> </br></br>' 
 
function runSelect() { 
  const numberOfAuthors = document.querySelector('#number-of-authors').value; 
  switch (numberOfAuthors) { 
    case '1': 
      authorList.appendChild(authorNameLabel); 
      authorList.appendChild(authorNameLabel); 
      break; 
    case '2': 
      authorList.appendChild(authorNameLabel); 
      authorList.appendChild(authorNameLabel); 
      authorList.appendChild(authorNameLabel); 
      break; 
    case '7': 
      for (let i = 0; i < 7; i++) { 
        authorList.appendChild(authorNameLabel); 
      } 
      break; 
    case 'more-then-8': 
      for (let i = 0; i < 6; i++) { 
        authorList.appendChild(authorNameLabel); 
      } 
      authorNameLabel.innerHTML = '<lable for="main-name">Фамилия ПОСЛЕДНЕГО автора</lable> <input name="main-name" id="main-name"/><lable>  Инициалы</lable> <input /> </br></br>' 
      authorList.appendChild(authorNameLabel); 
      break; 
    case 'organisation': 
      authorNameLabel.innerHTML = '<lable for="main-name">Название организации, учреждения, что подготовила монографию <input name="main-name" id="main-name"/> </br></br>' 
      authorList.appendChild(authorNameLabel); 
      break; 
  } 
}

<div id="modal-window"> 
  <div class="form-wrapper"> 
    <form action=""> 
      <div id="authorList"><label>Количество авторов</label> 
        <select id="number-of-authors" name="number-of-authors" onchange="runSelect()"> 
          <option value="1"> 1 автор </option> 
          <option value="2"> 2 автори </option> 
          <option value="7"> от 3 до 7 авторов </option> 
          <option value="more-then-8"> больше 8 авторов </option> 
          <option value="organisation"> Автор неизвестен або колективный автор (учереждение) </option> 
        </select> 
        </br> 
        </br> 
      </div> 
    </form> 
  </div> 
</div>

Пытаюсь добавить в модальное окно форму на js. В зависимости от того, что выберет пользователь в select, ниже должен добавится div с нужными input. Что ни пробовала, создается только один div, более того, когда выбираю 1 автор, совсем не создается ничего, когда последнее (автор неизвестен) то потом не меняется уже на другое, что бы ни выбирала (((

Подскажите, плиз, где ошибка, может логика неправильная. Спасибо!

Answer 1

Посмотрите такой вариант:

// Добавляем новый блок с классом tmp 
function addBlock(html) { 
  var authorNameLabel = document.createElement('div'); 
  authorNameLabel.className = "tmp"; 
  authorNameLabel.innerHTML = (html) ? html : '<lable for="main-name">Фамилия автора</lable> <input class="main-name" /><lable>Инициалы</lable></br></br>'; 
  return authorNameLabel; 
} 
// Очищаем старые блоки с классом tmp  
function removeBlocks() { 
  var blocks = document.querySelectorAll('.tmp'); 
  blocks.forEach(function(el){ 
    el.remove(); 
  }); 
} 
 
var authorList = document.getElementById('authorList'); 
function runSelect() { 
 removeBlocks(); 
 var numberOfAuthors = document.getElementById('number-of-authors').value; 
 switch (numberOfAuthors) { 
     case '1': authorList.appendChild(addBlock()); 
               
       break; 
     case '2': authorList.appendChild(addBlock()); 
               authorList.appendChild(addBlock()); 
               
       break; 
     case '7': for (let i = 0; i < 7; i++) { 
               authorList.appendChild(addBlock()); 
             } 
       break; 
     case 'more-then-8': for (let i = 0; i < 6; i++) { 
                           authorList.appendChild(addBlock('<lable for="main-name">Фамилия ПОСЛЕДНЕГО автора</lable> <input name="main-name"/><lable>  Инициалы</lable>  </br></br>')); 
                         }                       
                         break; 
     case 'organisation': authorList.appendChild(addBlock('<lable for="main-name">Название организации, учреждения, что подготовила монографию <input name="main-name"/> </br></br>')); 
       break; 
   } 
}

<div id="modal-window"> 
<div class="form-wrapper"> 
  <form action=""> 
    <div id="authorList"><label>Количество авторов</label> 
    <select id="number-of-authors" name="number-of-authors" onchange="runSelect()"> 
      <option value="0" selected> Выбрать.. </option> 
      <option value="1" > 1 автор </option> 
      <option value="2"> 2 автора </option> 
      <option value="7"> от 3 до 7 авторов </option> 
      <option value="more-then-8"> больше 8 авторов </option> 
      <option value="organisation"> Автор неизвестен или коллективный автор (учреждение) </option> 
    </select></br></br> 
    </div> 
</form>