Develop Reference

Trying to update the DOM with dropdown select

I want the content displayed to be manipulated by selecting a dropdown option. Here's what I have so far. It doesn't work.
HTML - here's an example of my dropdown.
<select id="dropdown">
<option value="Week1" id="Week1drop">Week 1 - Greetings, Common Adjectives & Planets</option>
</select>
The div below will be hidden by default using {display: none} in CSS.
<div id="week1">
<h1>Greetings, Common Adjectives & Planets</h1>
</div>
JavaScript - Below I've got an event listener to check for a change to the dropdown, which whill call the UpdateDom Function.
The function should be identifying that the user has selected Week1 on the dropdown and using Jquery .show() to make the Div visible.
document.getElementById("dropdown").addEventListener("change", updateDom);
function updateDOM () {
if (document.getElementById('dropdown').value == "Week1") {
$("#week1").show();
}
}
I hope this makes sense, does anyone know where I'm going wrong?

Apart from the typo you found yourself, if you have jQuery, USE it.
Also options do not have IDs
$("#dropdown").on("change", function() {
$("#week1").toggle(this.value == "Week1"); // same as $(this).val()
}).change(); // initialise on load
#week1 {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
<option value="">Please select</option>
<option value="Week1">Week 1 - Greetings, Common Adjectives & Planets</option>
</select>
<div id="week1">
<h1>Greetings, Common Adjectives & Planets</h1>
</div>

Display same div multiple times based upon dynamically generated checkbox

I am currently tackling some JQuery and Javascript and I have encountered a small problem that I can't for the life of me figure out how to solve.
I have a form which dynamically loads information from a json file which re-uses a "wpTemplate" and populates a select list. This form compromises something of the following;
<div class="wp" id="wpTemplate" >
<input type="checkbox" id="wpCheck" name="" class="wp" value="">
<label id="wpLabel" class="wpLabel"></label>
<div class="uc" id="uc">
<select class="ucSelect" id="ucSelect" name="case" multiple>
<option id="option" class="option"></option>
</select>
</div>
</div>
In essence, there could be multiple div "wpTemplate". My aim is to somehow have the ability to select either one or many "wpCheck" checkbox and for the "uc" div to display depending on the specific checkbox being selected.
I tried adding style="display: none;" to the "uc" class and a simple if-else statement with the show/hide functionality but to no avail.
$('.wp').each(function() {
if($(this).is(":checked")) {
$('.uc').show();
} else {
$('.uc').hide();
}
});
I'm new to JQuery so any help or alternative ways would be much appreciative.

How about:
$('.wpCheck').on('change', function () {
var $uc = $(this).closest('.wpTemplate').find('.uc')
if ($(this).prop('checked')) {
$uc.show()
} else {
$uc.hide()
}
})
Here's a working fiddle

Here is another way:
$( document ).ready(function() {
$('input.wp').change(function() {
var $this = $(this);
if ($this.is(":checked"))
{
$this.siblings('div.uc').show();
}
else
{
$this.siblings('div.uc').hide();
}
});
});
fiddle

Bootstrap breaks multiple children drowdown by main dropdown Javascript

I have done a bit of Jquery to change multiple children drowdown by main dropdown.
Image here
The issue I am having is as soon as I add the bootstrap styles "form-control select picker" it breaks as it converts the code to be in a different format.
The code for the Jquery to change multiple children drowdown by main dropdown is below. I would also like to add a save to save the relevant children when the relevant main dropdown has been selected:
<select class="search_top_options">
<option class="saleButton">property sales</option>
<option class="rentalButton">long lets</option>
</select>
$('.saleButton').click(function () {
$('.rentalSearch').hide();
$('.saleButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
$('.rentalButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
$('.saleSearch').fadeIn('fast');
});
$('.rentalButton').click(function () {
$('.saleSearch').hide();
$('.rentalButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
$('.saleButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
$('.rentalSearch').fadeIn('fast');
});
How can I do this? Code which is getting formatted by bootstrap sin below screenshot (won't let me attach it onto this ticket):
image here of broken bootstrap select code

The problem you are facing is, that the "click" event you are listening won't work on options.
In your case you can try to get the value of your select. The code provided is a little change to yours, but should give you a hint on how to solve your problem.
<select class="search_top_options">
<option disabled selected> -- select an option -- </option>
<option class="saleButton">property sales</option>
<option class="rentalButton">long lets</option>
</select>
<div class="saleSearch">
saleSearch content
</div>
<div class="rentalSearch">
rentalSearch content
</div>
$('.search_top_options').on('change', function() {
$(this).find('option:not(selected)').hide();
if ($(this).val() == 'property sales') {
$('.rentalSearch').hide();
$('.saleSearch').fadeIn();
} else if ($(this).val() == 'long lets') {
$('.saleSearch').hide();
$('.rentalSearch').fadeIn();
}
});
.rentalSearch {
display: none;
}
https://jsfiddle.net/tw0g5jeh/

create multiple next and previous button in jquery on single page with same class

I am new in JavaScript and Jquery and I am facing problem while creating a code for multiple drop-down with next and previous option , but I don't want to write twice same code for next and previous. I just wanted to use same code dynamically. I have tried but did not got any answer. Plzz suggest ....
<div class="filter-category">
<div class="floor-dropdown">
<span class="prev">Prev</span>
<select class="roof-filter">
<option value="1" selected>All types</option>
<option value="2">Type1</option>
<option value="3">Type 2</option>
</select>
<span class="next">Next</span>
</div>
<div class="floor-dropdown">
<span class="prev">Prev</span>
<select class="roof-filter">
<option>011</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<span class="next">Next</span>
</div>
</div>
jQuery(".roof-prev").click(function () {
jQuery('.roof-filter option:selected').prev().attr('selected', 'selected');
});
jQuery(".roof-next").click(function () {
jQuery('.roof-filter option:selected').next().attr('selected', 'selected');
});
Please don't write this code with different class name for second one, I want to use this code without writing again.
Thanks in advance.

You can use this as a reference to the element which was clicked. From that you can find the select it relates to by finding the closest common parent. Try this:
jQuery(function($) {
$(".prev").click(function () {
$(this).closest('.floor-dropdown').find('option:selected').prev().attr('selected', 'selected');
});
$(".next").click(function () {
$(this).closest('.floor-dropdown').find('option:selected').next().attr('selected', 'selected');
});
});
Example fiddle

How get the class of the div on clicking the select option inside that div?

I have two divs which show the product details content inside them, something like this:
<div class="product-style-odd">
<select>
<option value="active" onClick="changeStatus(<?php echo $productid;?>,0)">Activate</option>
<option value="inactive" onClick="changeStatus(<?php echo $productid;?>,1)">Deactivate</option>
</select>
</div>
<div class="product-style-even">
<select>
<option value="active" onClick="changeStatus(<?php echo $productid;?>,0)">Activate</option>
<option value="inactive" onClick="changeStatus(<?php echo $productid;?>",1)>Deactivate</option>
</select>
</div>
<script>
function changeStatus(productid, status){
//Now what I want to reference and hide that div in which changeStatus function was invoked
}
</script>
Now little explanation of above code. Both of these odd and even style divs are inside a loop so they are repeated depending upon the number of iterations in the loop.
Now what I want to achieve is that when the user clicks on inactive option from select menu then that particular div should fadeOut and I change the status of that product via Ajax.
I don't know how to get class of that particular div which was clicked.
And sorry for poor indentation of the code, I am not much familiar with SO editor.
EDIT:
Problem is still not solved.
The reason is the structure of that page is very complex. First I have body and then a div and then several divs and then comes a div with class product-style-even or product-style-odd. Now if I put the code to select the parent div then it selects the div after body.

$('select').click(function(){
var divClass=$(this).parent('div').attr('class');
});

How about something like this?
$("select").change(function () {
var selectVal;
$("select option:selected").each(function () {
selectVal = $(this).val();
});
if (selectVal == 'inactive') {
var selectParentDiv = $(this).parents('div');
selectParentDiv.fadeOut();
console.log(selectParentDiv.attr('class'));
}
});
Example: http://jsfiddle.net/rjngr/3/

With jQuery:
$(this).parents('div:first').hide();
in body of function changeStatus(productid, status)