При клике записать значение в input

202

15 ноября 2018, 18:10

Есть class="quantity" в этот класс должны приходить значения количество детей у которых выбран возраст. В class="number_val" возраст ребенка, а в class="input_val" value без текста только число

$('.quantity').click(function () { 
  $('.children_box').toggleClass('open'); 
}); 
$('.children_input').click(function () { 
  $(this).next().toggleClass('open'); 
}); 
$('.children_box .option').click(function() { 
  var num = $(this).text(); 
  $(this).closest('.children_box').find('.input_val').val(num); 
  $(this).closest('.children_box').find('.number_val').html(num); 
  $('.children_age').removeClass('open'); 
});

.select { 
  font-size: 13px; 
} 
.quantity { 
    height: 45px; 
    width: 100px; 
    padding: 0 15px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    background-color: #ccc; 
    position: relative; 
} 
.children_box { 
  width: 150px; 
  height: 200px; 
  background-color: #f2efef; 
  padding: 10px; 
  display: none; 
} 
.children_box.open { 
  display: block; 
} 
.children_input { 
  background-color: #d8d5e2; 
  padding: 6px; 
  cursor: pointer; 
} 
.children_age { 
  list-style-type: none; 
  padding: 6px; 
  margin: 0; 
  background-color: #d8d5e2; 
  cursor: pointer; 
  display: none; 
} 
.children_age.open { 
  display: block; 
} 
.children_age li:hover { 
  background-color: #f4f2f9; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="select"> 
  <div class="quantity"> 
    <span class="quantity_val">&mdash;</span> 
    <input class="input_quantity" type="hidden"  value=""> 
  </div> 
  <div class="children_box"> 
    <div class="children-item"> 
      <label class="children-title"> 
        Возраст 1 ребенка 
      </label> 
      <div class="children_input"> 
        <span class="number_val">&mdash;</span> 
        <input class="input_val" type="hidden"  value=""> 
      </div> 
      <ul class="children_age"> 
        <li class="option">Меньше года</li> 
        <li class="option">1 год</li> 
        <li class="option">2 года</li> 
        <li class="option">3 года</li> 
      </ul> 
    </div> 
    <div class="children-item"> 
      <label class="children-title"> 
        Возраст 2 ебенка 
      </label> 
      <div class="children_input"> 
        <span class="number_val">&mdash;</span> 
        <input class="input_val" type="hidden"  value=""> 
      </div> 
      <ul class="children_age"> 
        <li class="option">Меньше года</li> 
        <li class="option">1 год</li> 
        <li class="option">2 года</li> 
        <li class="option">3 года</li> 
      </ul> 
    </div> 
  </div> 
</div>

Вот ссылка на код

Answer 1

Согласен с комментарием по поводу select. но если уж надо кастомизировать, что невозможно с помощью select. то лучше разделить обработчики, Йа считаю)

var main = []; 
function addToMain(text, index) { 
	main[index] = text; 
  $('.main').attr('value', main); 
} 
 
$('.second').on('click', 'li', function(){ 
	var text = $(this).text(); 
 	var index = 1; 
	$(this).addClass('check'); 
  $(this).parent().prev().attr('value', text.slice(0, 1)); 
  addToMain(text, index); 
}); 
$('.first').on('click', 'li', function(){ 
  var text = $(this).text(); 
  var index = 0; 
	$(this).addClass('check'); 
  $(this).parent().prev().attr('value', text); 
  addToMain(text, index); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="box"> 
<input type="text" class="main"> 
<br> 
<br> 
  <div class="first"> 
    <input type="text" class="children first_input"> 
    <ul> 
      <li>1 one</li> 
      <li>2 two</li> 
      <li>3 three</li> 
    </ul> 
  </div> 
  <div class="second"> 
    <input type="text" class="children second_input"> 
    <ul> 
      <li>1 one</li> 
      <li>2 two</li> 
      <li>3 three</li> 
    </ul> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблема - Unable to connect to any of the specified mySQL host - странность с паролем

Удалил полностью mySQL v55

169

HTML

Отступы вокруг элемента

Добавил на пустую страницу блок размером 400х400, нужно чтобы его начало координат было с самого угла, но он вокруг себя делает отступы как на скринеКод...

171

HTML

как сформировать ссылку по GET запросу?

Вопрос: как определить в контроллере метод GET для формирования ссылки(и, соответственно, заранее не заданного html) и получения сохраненной...

204

HTML

Скрыть один из div'ов с одинаковыми class'ами

Есть несколько div'ов с одинаковыми class'ами, как можно скрыть пару div'ов из них? id не могу добавить

174