Как сделать чтобы количество select стало равно цифры введённой в input

316

17 августа 2017, 20:15

Добрый день! Подскажите пожалуйста как реализовать такую функцию Есть код

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
 
<body> 
  введите число: <input type="number"><br/> 
  <select> 
		<option value="1">Строка</option> 
	</select> 
</body> 
 
</html>

Как сделать чтобы количество select стало равно цифры введённой в input Допустим если я ввел в input число 2, то содержимое select отобразилось два раза на странице, сразу, без перезагрузки страницы

Answer 1

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
 
<body> 
  введите число: <input type="number"><br/> 
   
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script> 
$(document).ready(function(){ 
 
$('input').on('keyup change', function(){ 
    var inputvalue = $(this).val(); 
    $('select').remove(); 
    for(i = 0; i< inputvalue; i++){ 
        $('body').append($('<select><option>Содержимое</option></select>')) 
    } 
}); 
 
}); 
 
</script> 
</html>

Answer 2

jQuery(document).ready(function($) { 
  $('input').on('change', function(e) { 
    e.preventDefault(); 
    var num = $(this).val(); 
    var $select = $('select'); 
    var $content = $('.content'); 
 
    $content.html(''); 
 
    for (var i = 1; i <= num; i++) { 
      $content.append($select[0].outerHTML); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 число: <input type="number"><br/> 
 <div class="content"> 
    <select> 
      <option value="1">Строка</option> 
    </select> 
  </div>

Answer 3

Например, так:

function selects(val) { 
  $('select.clone').remove(); 
  for (var i = 1; i < val; i++) { 
    $('select.original').clone().removeClass('original').addClass('clone').appendTo('body'); 
  } 
} 
 
$('.number').on('change', function() { 
  selects(this.value) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
введите число: <input class="number" type="number"><br/> 
<select class="original"> 
  <option value="1">Строка</option> 
</select>