0

На html странице есть несколько элементов, 1-ый на странице есть, а 2-ой нет.

<input type="checkbox" onclick="insert magic">

Первый<select name = "1">
 <option>1</option>
 <option>2</option>
</select>

Второй<select name = "2">
<option>1</option>
<option>2</option>
</select>

С помощью чекбокса надо сделать так, чтобы при его нажатии первый элемент удалялся (Не скрывался), а второй создавался. Все что удалось сделать самому - скрыть, все остальные способы некорректно работали.

5
  • Решение должно быть на vanilla js или можно использовать jqurey ? Думаю основной смысл будет в том, что бы хранить второй select в js и подставлять его при выборе checkbox. Можно использовать легкий шаблонизатор, и т.д. и т.п.
    – olegatro
    25 янв 2016 в 16:46
  • Можно использовать jquery, конечно. 25 янв 2016 в 16:48
  • если вам действительно не подходит вариант через display: none, то используйте document.createElement() для создания и elem.remove() для удаления элемента. но это создаёт лишнюю нагрузку, т.к. будет пересчитываться всё дерево элементов при каждом нажатии на input
    – lexxl
    25 янв 2016 в 16:53
  • Спасибо за советы, надеюсь получится 25 янв 2016 в 17:00
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 26 янв 2016 в 1:46

2 ответа 2

0

Решение:

$(function() {
  'use strict';

  var newSelectHtml = 'Второй<select name="2"><option>1</option><option>2</option></select>';

  $('.js-checkbox').on('click', function() {
    $('.js-select-wrap').html(newSelectHtml);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="js-checkbox" type="checkbox">

<div class="js-select-wrap">
  Первый
  <select name="1">
    <option>1</option>
    <option>2</option>
  </select>
</div>

0

Я бы сделал как-то так(Примерно аналогичное решение на vanilla.js.) Хтмл:

<input type="checkbox" id="magic">

<div id="container">
  Первый
  <select>
   <option>1</option>
   <option>2</option>
  </select>
</div>

Vanilla.js:

document.addEventListener('DOMContentLoaded', function(e) {
    document.getElementById('magic').addEventListener('click', function(e) {
    let container = document.getElementById('container')

    container.innerHTML = ''

    let select = document.createElement('select')
    select.innerHTML = "<option>1</option><option>2</option>"

    container.appendChild(select)

  })
})

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.