We Keep Coding

Select child elements when parent ID is selected

I made a multi-choice select box. I used select2.
I want all child elements to be selected when Parent is selected.
For example, when ex1 is selected, every element should be selected.
When ex2 is selected, 4,5,7,8,9 and itself should be selected.
I tried to create a loop for this, but it just didn't make sense because there could be too many elements under each other.
jsfiddle link here https://jsfiddle.net/ph40eomt/2/
Thanks for the help in advance.
$('.js-select2-custom').select2({
"minimumResultsForSearch": "Infinity",
"singleMultiple": true,
})
function selectNumber() {
let select = $('.js-select2-custom')
select.next('span.select2').find('ul').html(function() {
let count = select.select2('data').length
return "<li style='font-size: 14px;line-height: 26px;color: black;'>" + count + " units Selected" + "</li>"
})
}
selectNumber()
$('.js-select2-custom').on('select2:close', function() {
let select = $(this)
$(this).next('span.select2').find('ul').html(function() {
let count = select.select2('data').length
return "<li style='font-size: 14px;line-height: 26px;color: black;'>" + count + " units Selected" + "</li>"
})
})
$('.js-select2-custom').on('select2:select', function(e) {
var data = e.params.data;
var userArrOptions = $("select[name='organizationUnitSelect'] option")
var i;
for (i = 0; i < userArrOptions.length; i++) {
var childId = $(userArrOptions[i]).attr("data-parent-id")
var selectedChildId = []
if (data.id == childId) {
var selectedOption = $('.js-select2-custom option[data-parent-id=' + childId + ']')
selectedOption.prop('selected', true);
}
}
$('.js-select2-custom').select2({
"minimumResultsForSearch": "Infinity",
"singleMultiple": true,
})
selectNumber()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select class="js-select2-custom form-control" multiple name="organizationUnitSelect">
<option class="options" value="1" data-parent-id="">ex1</option>
<option class="options" value="2" data-parent-id="1">ex2</option>
<option class="options" value="3" data-parent-id="1">ex3</option>
<option class="options" value="4" data-parent-id="2">ex4</option>
<option class="options" value="5" data-parent-id="2">ex5</option>
<option class="options" value="6" data-parent-id="3">ex6</option>
<option class="options" value="7" data-parent-id="4">ex7</option>
<option class="options" value="8" data-parent-id="4">ex8</option>
<option class="options" value="9" data-parent-id="7">ex9</option>
</select>
</div>

select option based on all values in an input

I have a simple reservation form. In this form, I have two input box and I change number of each room based on value of input hidden with class name "rooms", moreover there is another input that shows
numbers like this: 1 ,8*1 ,11
the first digit shows a count of person and the second digit after comma shows the age of that person in the first room.
I separated first and second rooms with a star between them. the digits after star shows count and age of each person in the second room as well.
my question is how can I use these digits for selecting my select boxes?
for example, I want to use the first digit for select box child. if that number was 1. i would choose 1 in first room for my child . also second number for age of first child in my first room and etc.
I wrote the below code with function fillchild but it does not work .
here is my snippet :
$(document).ready(function() {
$('#rooms').val($('.rooms').val());
$('#rooms').change()
})
$("#rooms").change(function() {
countRoom = $(this).val();
$(".numberTravelers").empty()
for (i = 1; i <= countRoom; i++) {
$(".numberTravelers").css("width", "100%").append('<div class="countRoom"><div class="numberOfRooms">room' + i + '</div><div class="col-xs-4">child<select name="childcount" class="childcount" onchange="childAge(this)"><option value="0"> 0 </option><option value="1"> 1 </option> <option value="2"> 2 </option></select></div><div class="selectAge col-xs-4"></div><input type="hidden" name="_root.rooms__' + i + '.childcountandage" class="childcountandage"/></div>')
}
});
function childAge(a) {
$(a).each(function() {
age = $(a).val();
$(a).closest(".countRoom").find(".selectAge").empty();
for (var j = 1; j <= age; j++) {
$(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('<div class="age"><label>child age' + j + '</label><select name="childage" class="childage form-control"><option value="1">till 1 year</option><option value="2">1-2 year</option><option value="3">2-3 year</option><option value="4">3-4 year</option></select></div>');
}
fillchild();
});
}
function fillchild() {
var childCounts = $('.childage').val().split(',');
var ageCounts = $('.childage').val().split('*');
childCounts.forEach((childage, index) => {
var selectname = '_root.rooms__' + (index + 1) + '.childcountandage';
var selectElement = $('input[name="' + selectname + '"]');
if (selectElement.length > 0) {
$(selectElement).val(childage);
}
})
}
.numberOfRooms {
border: 1px solid red;
}
.childage {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="researchii">
<input type="hidden" class="rooms" value="2" />
<input type="text" class="childage" value="1 ,8*1 ,11" readonly />
<div class="col-xs-4">
<span class="itemlable">rooms: </span>
<select name="rooms" id="rooms">
<option value="1" class="btn2"> 1 </option>
<option value="2" class="btn2"> 2 </option>
</select>
</div>
<div class="numberTravelers">
<div class="countRoom">
<div class="col-xs-4">
<span class="itemlable">child</span>
<select name="childcount" class="childcount" onChange="childAge(this)">
<option value="0"> 0 </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</div>
<div class="selectAge col-xs-4"></div>
<input type="hidden" name="_root.rooms__1.childcountandage" class="childcountandage" />
</div>
</div>
</div>

I have made it dynamic so that it still works for 2 child with age 3 and 4. You can see that example below.
$(document).ready(function() {
$('#rooms').val($('.rooms').val());
$('#rooms').change()
})
$("#rooms").change(function() {
countRoom = $(this).val();
$(".numberTravelers").empty()
for (i = 1; i <= countRoom; i++) {
$(".numberTravelers").css("width", "100%").append('<div class="countRoom"><div class="numberOfRooms">room' + i + '</div><div class="col-xs-4">child<select name="childcount" class="childcount" onchange="childAge(this)"><option value="0"> 0 </option><option value="1"> 1 </option> <option value="2"> 2 </option></select></div><div class="selectAge col-xs-4"></div><input type="hidden" name="_root.rooms__' + i + '.childcountandage" class="childcountandage"/></div>')
}
fillchild();
});
var ageGlobal ='';
function childAge(a) {
$(a).each(function() {
age = $(a).val();
ageGlobal = ageGlobal.split(',');
$(a).closest(".countRoom").find(".selectAge").empty();
for (var j = 1; j <= age; j++) {
$(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('<div class="age"><label>child age' + j + '</label><select name="childage" class="childage form-control"><option value="1">till 1 year</option><option value="2">1-2 year</option><option value="3">2-3 year</option><option value="4">3-4 year</option></select></div>');
var ageVal = ageGlobal[j-1] || "1";
//set the value of age dropdown
$(a).closest(".countRoom")
.find("select[name='childage']:eq("+(j-1)+")")
.val(ageVal);
}
});
//reset ageGlobal so that it works when child is changed
ageGlobal = "1";
}
function fillchild() {
var roomChildAge = $('.childage').val().split('*');
roomChildAge.forEach((childAge, index) => {
//find the child dropdown for the room
var childElement = $($('.countRoom')[index]).find('.childcount');
//element for child exist
if (childElement.length > 0) {
//get the child and age values using substring
var childCount;
//when there is no child and its age
if(childAge.trim()==="0"){
childCount = "0";
ageGlobal ='';
}else{
childCount = childAge.substring(0, childAge.indexOf(','));
ageGlobal = childAge.substring(childAge.indexOf(',')+1, childAge.length);
}
$(childElement).val(childCount.trim());
//trigger change eveny so that age select box is pre-selected
$(childElement).trigger('change');
}
})
}
.numberOfRooms {
border: 1px solid red;
}
.childage {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="researchii">
<input type="hidden" class="rooms" value="2" />
<input type="text" class="childage" value="2 ,3,4*0" readonly />
<div class="col-xs-4">
<span class="itemlable">rooms: </span>
<select name="rooms" id="rooms">
<option value="1" class="btn2"> 1 </option>
<option value="2" class="btn2"> 2 </option>
</select>
</div>
<div class="numberTravelers">
<div class="countRoom">
<div class="col-xs-4">
<span class="itemlable">child</span>
<select name="childcount" class="childcount" onChange="childAge(this)">
<option value="0"> 0 </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</div>
<div class="selectAge col-xs-4"></div>
<input type="hidden" name="_root.rooms__1.childcountandage" class="childcountandage" />
</div>
</div>
</div>

Select option box based on value of an input box in appended selectbox

I have a selectbox that shows number of childeren. when the user change selectbox it appends selectboxes for showing age of each child. moreover I have an input box with type readonly .
how can I select each child age based on value of input type with classname age ?
i get values like this : 1,2
the first value is for the first selectbox and the second value is for second selectbox .
and if user change select box froM the first i want to clear the selected option.
is there a way to do this ?
here is my snippet :
$(document).ready(function(){
$('.countRoom').find('.childnum').val($('.childcount').val());
$('.countRoom').find('.childnum').change()
})
function childAge(a){
$(a).each(function(){
age=$(a).val();
$(a).closest(".countRoom").find(".selectAge").empty();
for(var j=1;j<=age;j++){
$(a).closest(".countRoom").css("width","100%").find(".selectAge").append('<div class="age"><label>Age of Child' + j + '</label><select name="childage" class="childage form-control"><option value="1">Up to 1 years</option><option value="2">1 to 2 years</option></select></div>');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="countRoom">
children
<select onChange="childAge(this)" class="childnum">
<option value="0"> 0 </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
<input type="text" class="childcount" value="2" readonly style="display:none;">
<input type="text" class="age" value="1,2" readonly style="background:green;">
<div class="selectAge"></div>
</div>

First you have to get the value of input.age and then split it. After that you can use that value to set selected attribute in your loop
$(document).ready(function() {
$('.countRoom').find('.childnum').val($('.childcount').val());
$('.countRoom').find('.childnum').change()
})
function childAge(a) {
var ageVals = $('input.age').val().split(',')
$('input.age').val(',')
$(a).each(function() {
age = $(a).val();
$(a).closest(".countRoom").find(".selectAge").empty();
for (var j = 1; j <= age; j++) {
$(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('<div class="age"><label>Age of Child' + j + '</label><select name="childage" class="childage form-control"><option value="1" ' + (ageVals[j - 1] == 1 ? 'selected' : '') + '>Up to 1 years</option><option value="2" ' + (ageVals[j - 1] == 2 ? 'selected' : '') + '>1 to 2 years</option></select></div>');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="countRoom">
children
<select onChange="childAge(this)" class="childnum">
<option value="0"> 0 </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
<input type="text" class="childcount" value="2" readonly style="display:none;">
<input type="text" class="age" value="1,2" readonly style="background:green;">
<div class="selectAge"></div>
</div>

How to associate two inputs in JavaScript?

I have this code:
$(document).ready(function(){
$('.container select').each(function(){
$(this).on('change', function(){
var selectedVal = $(this).val();
//console.log(selectedVal);
});
});
$('input').on('change', function () {
var sum = 0;
$('input').each(function() {
sum += Number($(this).val());
});
$('.total span').html(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total'>
Total nr: <span>5(2 A1, 3 A2)</span>
</div>
</div>
Is it possible that on change of the select and the input of type number to modify the total number like in the code above using JavaScript/jQuery?
Can anyone help me with this please.
On every change on the inputs or select fields I need to calculate total number of A1 and total number of A2. Hope this make sense. And display them beside the total number.
JSFiddle

We can't give you the full code but I tried to provide some logic for what you want.I think you want some thing like this:
//create a json to collect the sum of numbers
var number = {
a1: 0,
a2: 0,
a1_count:0,
a2_count:0
};
//check in select change
$(".select").change(function() {
//flush previous calculation before using again
number.a1=0,number.a2=0,number.a1_count=0,number.a2_count=0;
//check all the select value and get the corresponding input value
$(".select").each(function() {
var valueType = $(this).val();
if (valueType == "a1") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
} else if (valueType == "a2") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
}
});
$("#total").html('Total:'+(number.a1+number.a2)+',A1:'+number.a1+'('+number.a1_count+'),A2:'+number.a1+'('+number.a2_count+')');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total' id="total">
</div>
</div>

This will work for any arbitrary list in the select.
function change() {
var res = {}, fulls = $('.container .full');
fulls.each(function(index){
var selected = $(this).find('select > option:selected').text();
if (! res[selected]) res[selected] = 0;
res[selected] += 1*$(this).find('input[type="number"]').val();
});
var detail = "", total = 0;
for(prop in res) {
if (res.hasOwnProperty(prop)) {
try {
var val = 1*res[prop];
detail += ", "+val+" "+prop;
total += val;
}catch(e){}
}
}
$('.total > span').text(""+total+" ("+detail.substr(2)+")");
}
$().add('.container .full input[type="number"]')
.add('.container .full select[name^="select"]')
.on('change', change);

Default value in dropdown menu (JavaScript)

I wish to set the default value in a dropdown menu to the middle one (not the first).
I use dropdowns on my site for visitors to choose one of three / four / five sizes of a product.
The JavaScript is:
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
The other code is:
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
User chooses a value, and then the BUY button changes accordingly. Thus ...
<div>
<div id="option1" class="group">Button for size S</div>
<div id="option2" class="group">Button for size M</div>
<div id="option3" class="group">Button for size L</div>
</div>
This works great, but in this instance, I want M to be the default, and not S (there are three sizes here, but sometimes there are more).

Why don't you make a selected property?
<option value="option2" selected>M</option>

Just use following snippets:
With jQuery
$(document).ready(function () {
var $select = $('#selectMe');
$select.val("option2");//initial value
$("[id=" + $select.val() + "]").show()
.siblings().hide();
$select.change(function () {
$("[id=" + $select.val() + "]").show()
.siblings().hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
<div>
<div id="option1" class="group">Button for size S</div>
<div id="option2" class="group">Button for size M</div>
<div id="option3" class="group">Button for size L</div>
</div>
Or, You can do it through pure JavaScript
var selectBox = document.getElementById("selectMe")
selectBox.selectedIndex = parseInt(selectBox.length / 2);
selectBox.onchange = function () {
changeButton(this.value);
}
changeButton(selectBox.value);
function changeButton(val) {
console.log(val)
var i = -1, elements = document.querySelectorAll('[class=group]');
while (elements[++i]) {
console.log(elements[i]);
elements[i].style.display = (elements[i].id == val) ? "block" : "none";
}
}
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
<div>
<div id="option1" class="group">Button for size S</div>
<div id="option2" class="group">Button for size M</div>
<div id="option3" class="group">Button for size L</div>
</div>

You got 3 options
1.Using HTML selected property for the option you want.
<select id="selectMe">
<option value="option1">S</option>
<option value="option2" selected>M</option>
<option value="option3">L</option>
</select>
2.Using jQuery
$('#selectMe').val('option2')
3.Using pure JS
document.getElementById('selectMe').value = 'option2';

Try this:
var options = $('#selectMe option');
var total = options.length + ((options.length % 2 == 0) ? 0 : -1);
var value = $(options[total / 2]).val();
$('#selectMe').val(value);

Try with one button:
HTML:
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
...
<div>
<div id="button-size" class="group">Button for size S</div>
</div>
jQuery:
var options = $('#selectMe option');
var total = options.length + ((options.length % 2 == 0) ? 0 : -1);
var value = $(options[total / 2]).val();
$('#selectMe').val(value);
changeButtonLabel(value);
$('#selectMe').on('change', function (evt)
{
var value = $(this).val();
changeButtonLabel(value);
});
function changeButtonLabel(value)
{
$('#button-size').html('Button for size ' + $('#selectMe').find('option[value=' + value + ']').html());
}