Как правильно обработать select

348

22 декабря 2017, 03:31

Доброго времени суток. Вопрос такой. Необходимо чтобы в форме было поле где указывается есть ли дети, а если да, то сколько их и их возраст. Реализовал это так:

$(document).ready(function() { 
    var count = 6, i, j, el, child; 
    var container = $('#child-amount'); 
 
    el = $(document.createElement('select')).attr('class', 'child__amount-item'); 
    container.append(el); 
    for (i = 0; i < count; ++i) { 
        child = $(document.createElement('option')); 
        child.attr('value', i + 1); 
        child.text(i); 
        el.append(child); 
    } 
 
    el.change(function() { 
        count = parseInt($(this).find(':selected').text()); 
 
        for (i = 0; i < count; ++i) { 
            el = $(document.createElement('select')).attr('class', 'child__old').attr('id', 'child__old_' + i); 
            container.append(el); 
 
            for (j = 0; j < 18; ++j) { 
                child = $(document.createElement('option')).attr('id', 'child__old-item' + j); 
                child.attr('value', j); 
                child.text(j); 
                el.append(child); 
            } 
        } 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="child-amount" id="child-amount"></div>

Но понимаю, что это не совсем корректно реализовано, так как если выбрать сначала что детей скажем 2, то добавляется 2 selecta, но если тут же изменить количество детей на 1, то будет 3 selecta, то есть они просто приплюсуют. Кто подскажет как избежать этого? И еще необходимо, чтобы если количество детей больше 0, то к select с классом child__amount-item к классу добавлялась приставка, скажем _have - нужно для стилизации.

Answer 1

И не назначайте элементам никакие id, они Вам не нужны.

$(document).ready(function() { 
  var count = 6, 
    i, j, el, child; 
  var container = $('#child-amount'); 
 
  el = $(document.createElement('select')).attr('class', 'child__amount-item'); 
  container.append(el); 
  for (i = 0; i < count; ++i) { 
    child = $(document.createElement('option')); 
    child.attr('value', i); 
    child.text(i); 
    el.append(child); 
  } 
 
  el.change(function() { 
    var count = parseInt($(this).val()); 
 
    if (count > 0) 
      $(this).addClass("child-have"); 
    else 
      $(this).removeClass("child-have"); 
 
    var $ages = container.find(".child__old"); 
 
    // 1. delete if we have more than selected 
    for (i = $ages.length - 1; i >= count; i--) { 
      $($ages[i]).remove(); 
    } 
 
    // 2. create if we have fewer than selected 
    for (i = $ages.length; i < count; ++i) { 
      el = $(document.createElement('select')).attr('class', 'child__old'); 
      container.append(el); 
 
      for (j = 0; j < 18; ++j) { 
        child = $(document.createElement('option')); 
        child.attr('value', j); 
        child.text(j); 
        el.append(child); 
      } 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="child-amount" id="child-amount"></div>

Answer 2

У вас такое происходит потому что при каждом новом выборе у вас добавляются записи.

Предлагаю такой алгоритм.

Есть текущее количество детей (изначально 0).
Если пользователь установил некоторое, новое количество детей, то смотрим это больше или меньше текущего значения.
Если больше то просто добавляем разницу.
Если меньше то стираем разницу. Кроме того если пользователь уже заполнил данные, то можно у него спросить уверен ли он что хочет затереть их.

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