2

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

<select name="name">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">3</option>
</select>
<div class="result"></div>

С помощью jquery при изменении select в div с классом result добавился новые html коды, если выбрать select c значением 1 добавился 1 html код, а если с значением 2 добавился 2 html кода, а если 3 соответственно 3 html кода:

<input name="1" value="1">

Помогите пожалуйста

2 ответа 2

1

var code = "<h1>Требуемый код</h1>";

//Событие вызывается при изменении значения select
$('select[name="name"]').on('change', function(){
  //Берём номер кода
  var count = $(this).val();
  //Записываем внутрь блока стирая старые "внутренности"
  $('.result').html(code.repeat(count));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div class="result"></div>

7
  • Не сработало var cods = [ <select name="1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> ]; $('#child').on('change', function(){ var code = $(this).val(); $('#child_result').text(cods[code]); }); Commented 24 июл. 2018 в 10:07
  • @BektursunSapiev И как в этом, простите, разбираться? Массив кодов подразумевает, что в нём будет строка с кодом, а не код.
    – goodmice
    Commented 24 июл. 2018 в 10:10
  • аа извините, а такой код как можно записывать? или просто вот так: var cods = html(' html code '); Commented 24 июл. 2018 в 10:11
  • @BektursunSapiev я написал пример в ответе
    – goodmice
    Commented 24 июл. 2018 в 10:23
  • Оо классно, у меня сработало. Но вопрос был немножко другим: не массив кода, а надо добавить один html код, по выбору в select. Если в select выбрал с <option value="1"> добавить один раз, а если выбирает <option value="2"> тот же html код надо добавить 2 раза в <div class="result"></div>. Как будет в таком случае? Заранее спасибо за помощь Commented 24 июл. 2018 в 10:30
0

Вариация на тему:

let code = '<input name="#NAME#" value="#VALUE#">'; // Шаблон кода
let select = document.getElementById('count');
let result = document.querySelector('.result');

select.addEventListener('change', () => {
  let html = (new Array(+select.value).fill(0)) // Массив выбранного размера
    .map((_, i) => code
      .replace('#NAME#', `inp_${i}`)
      .replace('#VALUE#', i + 1)) // Рендерим шаблон
    .join("\n")

  result.innerHTML = html; // Инжектим в DOM
});
select.dispatchEvent(new Event('change')); // emit события, для начального значения
<select id="count">
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
</select>
<div class="result"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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