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>

show the image with specific named using javascript

I have some picture in folder "../../images"
I give the name of picture with example
101_2018_1_1.jpg
101_2018_1_2.jpg
101_2018_1_3.jpg
101 is on var1
2018 is on id year
and 1 is on var3
and the last is auto increment
how can I call all the images with specific named based on combo box I chose with javascript and show the image on my page?
here the example of my form
<form>
<select name="var1" id="var1" >
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3" >
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<button type="submit" name="search">search</button>
</form>

Using jQuery you can do something like:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var URL = "www.example.com/image/";
//Get the values of form element
var var1 = $("#var1").val();
var year = $("#year").val();
var var3 = $("#var3").val();
//Check Up to 10 increments
for (i = 1; i <= 10; i++) {
var img = URL + var1 + "_" + year + "_" + var3 + "_" + i + ".jpg";
getImage(img);
}
return false;
});
});
/*
Check if image exist and add it.
If not, just console
*/
function getImage(image_url) {
$.get(image_url)
.done(function() {
// Image does exist - append on #image-container container
$("#image-container").append('<img src="' + image_url + '">');
}).fail(function() {
// Image doesn't exist - do nothing.
console.log(image_url + " does not exist.");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="2018">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<div id="image-container"> </div>
<button type="submit" name="search">search</button>
</form>

If I understand correctly, you would do something like:
var imgUrl, counter = 3;
document.getElementById('search').addEventListener('click', function() {
imgUrl = "../../" + document.getElementById('var1').value + "_" + document.getElementById('year').value + "_" + document.getElementById('var3').value + "_";
alert(imgUrl);
for (var i = 0; i < counter; i++) {
var img = document.createElement("IMG");
var url = imgUrl + i.toString() + ".jpg"
//img.setAttribute('src', );
alert(url);
}
});
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<input type="submit" name="search" id='search'>
</form>
That would get you the image url, set the src attribute to that url, then append it to the body.

Html- I have two multiple select boxes and a label

I want to change the value of the label when I select two values(one from each multiple select box) Like option1 from box1 and option2 from box2 and the label value changes.
<select id="opt1" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="opt2" multiple="multiple">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
</select><br />
<label id="changeme">This should change</label>

var FLAG1=0;
function update(){
if(FLAG1==0){
FLAG1=1;
}
else{
var ct=document.querySelectorAll('select');
document.getElementById('changeme').innerHTML=ct[0].value+"-"+ct[1].value;
FLAG1=0;
}
}
<select id="opt1" multiple="multiple" onchange="update();">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="opt2" multiple="multiple" onchange="update();">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
</select><br />
<label id="changeme">This should change</label>

Roughly it may be like that
var s1_t = 'N/A';
var s2_t = 'N/A';
$('#opt1').change(function(){
var $this = $(this);
var val = $this.val();
s1_t = val ? $this.find("option[value=" + val + "]").text() : 'N/A';
$('#changeme').text(s1_t + ' - ' + s2_t)
});
$('#opt2').change(function(){
var $this = $(this);
var val = $this.val();
s2_t = val ? $this.find("option[value=" + val + "]").text() : 'N/A';
$('#changeme').text(s1_t + ' - ' + s2_t)
});
Your updated sample JsFiddle

You could start with something like this
var label = document.getElementById("changeme");
var opt1 = document.getElementById("opt1");
var opt2 = document.getElementById("opt2");
opt1.onchange = function() {
label.textContent = opt1.value + "-" + opt2.value;
}
opt2.onchange = function() {
label.textContent = opt1.value + "-" + opt2.value;
}
https://jsfiddle.net/61ed0t6j/6/

Remove specific value in Javascript Array dynamically

I want to remove a specific value from an array.
For example:
var categories = ["Lenovo","Large","100"];
I displayed it like this
HTML CODE:
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="brand" >
<option value="">Select a Brand</option>
<option value="Lenovo">Lenovo</option>
<option value="Acer">Acer</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="screen_size" style="margin-top:0px;">
<option value="">Select a Screen Size</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="cpu">
<option value="">Select a CPU</option>
<option value="Intel">Intel</option>
<option value="Amd">Amd</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="memory">
<option value="">Select a Memory</option>
<option value="500mb">500mb</option>
<option value="1tb">1tb</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="price">
<option value="">Filter by Price</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
</select>
</div>
How can I achieve this?
I tried it so many times but I failed because I cant get the value. You can check my code:
jQuery("#filter").val()
jQuery(function() {
jQuery("#brand,#screen_size,#cpu,#memory,#price").change(function() {
var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
var cpu = jQuery("#cpu").val();
var memory = jQuery("#memory").val();
var price = jQuery("#price").val();
var categories = [];
if (brand) {
categories.push(brand);
}
if (screen_size) {
categories.push(screen_size);
}
if (cpu) {
categories.push(cpu);
}
if (memory) {
categories.push(memory);
}
if (price) {
categories.push(price);
}
length = categories.length;
categories2 = categories.toString();
var categories3 = "";
for (var i = 0; i < length; i++) {
var cat_id = "cat" + i;
categories3 += "<div class='filter_style'>" + categories[i] + "<a href='" + cat_id + "' id='" + cat_id + "' onclick='removeCat(event)'><span style='margin-left:15px;color:gray;' >x</span></a></div>";
jQuery("#filter").html(categories3);
}   
});
});
function removeCat(evt) {
evt.preventDefault();
var catid = jQuery(this).attr('href');
var cat = jQuery(this).data("id");
//jQuery.grep(); maybe or indexOf first then slice() but I do not get the value
alert(catid);
}

You can simply remove element from array using below method
categories .splice( $.inArray(removeItem, categories), 1 );//removeItem is name of item which you want to remove from array

If you want to remove, for example, "Lenovo" from:
var categories = ["Lenovo","Large","100"];
do:
categories.splice(0)

A selected value of a <select> can modify another <select>?

I have 2 selects and what i wanna do is (without refreshing the page): the moment the user selects a value from the first select (value1 or value2) changes the second select: if he choosed value1, then he have a select with values a, b, c, d; if he choosed value2, then he can choose on second select e, f, g, h.
Is this possible without refreshing the page?
Edit: I know you all are not here to write code for others; just wanted to keep it simple instead of posting all my messy code :). So, what i want to do, is to modify the second select id=selectAccessiblePaths with the onchange function applyGroupSelection()
function initDivWithConfig () {
divWithInfo = document.createElement('div');
divWithInfo.class = 'divWithInfoControls';
divWithInfo.style.position = 'absolute';
divWithInfo.style.top = '10px';
divWithInfo.style.width = '100%';
divWithInfo.style.textAlign = 'center';
var groupToDisplay = '<p id="pSelectGroup" style="display: block;">Select the user group: ';
groupToDisplay += '<select id="selectGroup" onchange="applyGroupSelection()">';
groupToDisplay += '<option selected>Nothing selected</option>';
for ( var g in userGroups ) {
groupToDisplay += '<option>' + g + '</option>';
}
groupToDisplay += '</select></p>';
divWithInfo.innerHTML += groupToDisplay;
groupSelected = 'group1';
var accessiblePathsToDisplay = '<p id="pSelectAccessiblePaths" style="display: none;">Select the accessible paths: ';
accessiblePathsToDisplay += '<select id="selectAccessiblePaths" onchange="applyAccessiblePathsSelection()">';
accessiblePathsToDisplay += '<option selected>Nothing selected</option>';
for ( var ap=0; ap<userGroups[ groupSelected ].accessiblePaths.length; ap++ ) {
var pathsForThisGroup = userGroups[ groupSelected ].accessiblePaths[ ap ][ "ns0:svg" ][ "groupPathsName" ];
accessiblePathsToDisplay += '<option>' + pathsForThisGroup + '</option>';
}
accessiblePathsToDisplay += '</select></p>';
divWithInfo.innerHTML += accessiblePathsToDisplay;
document.body.appendChild( divWithInfo );
}
function applyGroupSelection () {
groupSelected = "group2";
hideUnhideObject( "pSelectGroup" );
hideUnhideObject( "pSelectAccessiblePaths" );
}

Easy with HTML, CSS and a JavaScript line:
HTML:
<select id='firstselect' onchange="document.getElementById('secondselect').className=this.value">
<option value='select'>Select a value</option>
<option value='value1'>Value1</option>
<option value='value2'>Value2</option>
</select>
<select id='secondselect'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
<option value='e'>e</option>
<option value='f'>f</option>
<option value='g'>g</option>
<option value='h'>h</option>
</select>
CSS:
#secondselect, #secondselect option {
display: none;
}
#secondselect.value1, #secondselect.value2 {
display: block;
}
.value1 option[value="a"], .value1 option[value="b"], .value1 option[value="c"], .value1 option[value="d"] {
display: block !important;
}
.value2 option[value="e"], .value2 option[value="f"], .value2 option[value="g"], .value2 option[value="h"] {
display: block !important;
}
See in action: http://jsfiddle.net/nukz3ns3/
UPDATED:
Also you can do a function for change to default value when firstselect change:
function setSecondSelect( select ){
var secondselect = document.getElementById('secondselect');
secondselect.className=select.value;
secondselect.selectedIndex = (select.value === 'value1')?0:4;
}
See how it works: http://jsfiddle.net/nukz3ns3/1/

Yes this is possible by using ajax post method.

Yes its possible if you used ajax.
http://api.jquery.com/jquery.ajax/

try this:
<script type="text/javascript">
$(document).ready(function () {
$("#select1").change(function() {
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());}
var id = $(this).val();
// alert(id);
var options = $(this).data('options').filter('[value=' + id + ']');
if(options.val() == undefined){
//$('#select2').hide();
$('#select2').prop("disabled",true);
}else{
//$('#select2').show();
$('#select2').prop("disabled",false);
$('#select2').html(options);
}
});
});
</script>
<div class="pageCol1">
<div class="panel">
<div class="templateTitle">Request for Items</div>
<table class="grid" border="0" cellspacing="0" cellpadding="0">
<tr class="gridAlternateRow">
<td><b>Item to be Request</b></td>
<td>
<select name="select1" id="select1">
<option value="1">--Select--</option>
<option value="2">Stationaries</option>
<option value="3">Computer Accessories</option>
<option value="4">Bottle</option>
<option value="5">Chair</option>
<option value="6">Office File</option>
<option value="7">Phone Facility</option>
<option value="8">Other Facilities</option>
</select>
</td></tr>
<tr><td>
<b>Category</b>
</td>
<td>
<select name="select2" id="select2" >
<option value="1">--Select--</option>
<option value="2">Note Books</option>
<option value="2">Books</option>
<option value="2">Pen</option>
<option value="2">Pencil</option>
<option value="2">Eraser</option>
<option value="2">Drawing sheets</option>
<option value="2">Others</option>
<option value="3">Laptop</option>
<option value="3">PC</option>
<option value="3">CPU</option>
<option value="3">Monitor</option>
<option value="3">Mouse</option>
<option value="3">Keyboard</option>
<option value="3">Mouse Pad</option>
<option value="3">Hard Disk</option>
<option value="3">Pendrive</option>
<option value="3">CD/DVD Writer</option>
<option value="3">RAM</option>
<option value="3">Mother Board</option>
<option value="3">SMPS</option>
<option value="3">Network Cables</option>
<option value="3">Connectors</option>
<option value="7">Land Line</option>
<option value="7">BlackBerry </option>
<option value="7">Other</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
your html can be of your required format.

If you are trying to populate the second select from existing options,
Try using filter() on a change handler
$("firstselect").change(function() {
var options = $("secondselect").filter(function() {
//return the options you want to display
});
$("secondselect").html(options);
});
Or if you want to retrieve options from server, use AJAX and form the options
and do an innerHTML as above.