We Keep Coding

Dynamically replace both 'src' and 'href' tags based on drop down

I've set up an 'onchange' function for a select box that will dynamically change an image on the webpage based on which option is selected. This is so that users can select a room from a dropdown and then view the timetable for that room. However, the image shown was quite small, so I've implemented the lightbox program to allow users to click the image and make it larger.
I've adapted my onchange function to change the image that is shown initially, but when a user clicks the image, they are still shown the image declared in the href, as this value isn't changed by the onchange function.
I've tried a few methods that I thought would work, but to no avail. Does anyone have a solution for ensuring that the href value shown below always matches that shown later on in the src for the smaller image?
<select required id="roomfield" name="roomfield" onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].id); room()"> required>
<option value=""></option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c1.png" value="C1" roomname="test1">C1</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c2.png" value="C2" roomname="test2">C2</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c3.png" value="C3" roomname="test3">C3</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c8.png" value="C8" roomname="test4">C8</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c9.png" value="C9" roomname="test5">C9</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/hall.png" value="Hall" roomname="testh">Hall</option>
</select>
<a class="example-image-link" id="imageToSwap2" width="100%" href="https://dat.ccits.org.uk/book/images/roomfield/holder.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
<img class="example-image" id="imageToSwap" src="https://dat.ccits.org.uk/book/images/roomfield/holder.png" alt="" />
</a>
I have read Replace image src and a href onclick but can't seem to work out how to implement this solution into my existing code, with regards to the document.getElementById('YOUR_ID').href = 'abraCaDabraDotCom'; part.

Should find the parent of image which is a container in example and replace corresponding href with the selected value via $('#imageToSwap').parent().attr('href', this.options[this.selectedIndex].id) as follows:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select required id="roomfield" name="roomfield" onchange="$('#imageToSwap').parent().attr('href', this.options[this.selectedIndex].id);$('#imageToSwap').attr('src', this.options[this.selectedIndex].id); room()"> required>
<option value=""></option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c1.png" value="C1" roomname="test1">C1</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c2.png" value="C2" roomname="test2">C2</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c3.png" value="C3" roomname="test3">C3</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c8.png" value="C8" roomname="test4">C8</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/c9.png" value="C9" roomname="test5">C9</option>
<option id="https://dat.ccits.org.uk/book/images/roomfield/hall.png" value="Hall" roomname="testh">Hall</option>
</select>
</br>
</br>
<a class="example-image-link" id="imageToSwap2" width="100%" href="https://dat.ccits.org.uk/book/images/roomfield/holder.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" id="imageToSwap" src="https://dat.ccits.org.uk/book/images/roomfield/holder.png" alt="" /></a>

By putting all the logic into the onchange property the code is hard to read and hard to change. This can be fixed by abstracting it to a separate script section. Another possible change is the use of the dataset property: (data-*) to store additional data such as the url of an option
const imageToSwap = document.querySelector('#imageToSwap');
const lightboxLink = document.querySelector('#imageToSwap2')
document.querySelector('#roomfield').addEventListener('change', e => {
const elem = e.currentTarget;
const selectedUrl = elem.options[elem.selectedIndex].dataset.url;
imageToSwap.setAttribute('src', selectedUrl)
lightboxLink.setAttribute('href', selectedUrl)
})
<select required id="roomfield" name="roomfield" required>
<option value=""></option>
<option data-url="https://dat.ccits.org.uk/book/images/roomfield/c1.png" value="C1" roomname="test1">C1</option>
<option data-url="https://dat.ccits.org.uk/book/images/roomfield/c2.png" value="C2" roomname="test2">C2</option>
<option data-url="https://dat.ccits.org.uk/book/images/roomfield/c3.png" value="C3" roomname="test3">C3</option>
<option data-url="https://dat.ccits.org.uk/book/images/roomfield/c8.png" value="C8" roomname="test4">C8</option>
<option data-url="https://dat.ccits.org.uk/book/images/roomfield/c9.png" value="C9" roomname="test5">C9</option>
<option data-url="https://dat.ccits.org.uk/book/images/roomfield/hall.png" value="Hall" roomname="testh">Hall</option>
</select>
<br />
<br/>
<a class="example-image-link" id="imageToSwap2" width="100%" href="https://dat.ccits.org.uk/book/images/roomfield/holder.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" id="imageToSwap" src="https://dat.ccits.org.uk/book/images/roomfield/holder.png" alt="" /></a>

jQuery show/hide based on select dropdown not working as expected

I'm attempting to show/hide <div>'s based on values chosen from a select drop-down menu.
HTML
<select id="selReport">
<option value="Report One">Report One</option>
<option value="Report Two">Report Two</option>
<option value="Report Three">Report Three</option>
<option value="Report Four">Report Four</option>
</select
<div id="Report One" class="description">
<p>...</p>
</div>
<div id="Report Two" class="description">
<p>...</p>
</div>
I'm using the following jQuery snippet to hide the <div>'s and then show them based on what is selected in the drop-down menu:
jQuery
$('.description').hide();
$('#selReport').change(function () {
$('description').hide()
$("[id='" + this.value + "'").show();
});
When a new option is selected from the drop-down menu the previous <div> that was displayed doesn't hide. It stays displayed and I don't know why. Can someone offer a suggestion?

First change your ids to dont have any spaces (space is an invalid character for IDs) like follows:
<div id="Report-One" class="description">
<p>...</p>
</div>
<div id="Report-Two" class="description">
<p>...</p>
</div>
And second (little typo here :)) change:
$('description').hide();
to:
$('.description').hide();

You have to change
$('description').hide() // tag selector
by
$('.description').hide() // class selector
Your code as it is, selects elements with tag description what is not what you're looking for
EDIT
Missed the Id thing (credit to #taxicala). Definitively you need to change your ids.
<select id="selReport">
<option value="ReportOne">Report One</option>
<option value="ReportTwo">Report Two</option>
<option value="ReportThree">Report Three</option>
<option value="ReportFour">Report Four</option>
</select
<div id="ReportOne" class="description">
<p>...</p>
</div>
<div id="ReportTwo" class="description">
<p>...</p>
</div>

Packery -- jquery show/hide works but not the other way

I have a bizzare problem using Packery. Below is my code.
If I toggle from show(default) to hide when I select from the dropdown menu it works fine.
When I hide it on load and would like to show the class when I select from drown down, it does NOT work. It just shows me the last picture ALWAYS.
I cant seem to figure out what the problem is. Could anyone help?
<select id="DateFilter">
<option selected>Choose Date</option>
<option id="yesterday">yesterday</option>
<option id="today">today</option>
</select>
<div id="container" class="js-packery" data-packery-options='{ "itemSelector": ".item", "gutter": 0 }'>
<div class="yesterday">
<div class="item">
<figure><img src="pic1.jpg" width="100%"><figcaption>Pic 1</figcaption></figure>
</div>
<div class="item">
<figure><img src="pic2.jpg" width="100%"><figcaption>Pic 2</figcaption></figure>
</div>
<div class="item">
<figure><img src="pic3.jpg" width="100%"><figcaption>Pic 3</figcaption></figure>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".yesterday").show();
$("#DateFilter").change(function(){
if($(this).find("option:selected").attr("id")=="yesterday"){
$(".yesterday").hide();
}
});
});
</script>

<select id="DateFilter">
<option selected>Choose Date</option>
<option value="yesterday" id="yesterday">yesterday</option>
<option value="today" id="today">today</option>
</select>
and change
if($(this).find("option:selected").attr("id")=="yesterday"){
with
if($(this).val() == 'yesterday'){

Code is working as it should be. You have explained you problem partially> Images can be shown on document load and it become hidden when you select Yesterday.

Show relevant divs when an html select option is clicked

I want a div to become visible when its corresponding select option is clicked (and to hide others) unfortunately my attempts at JavaScript are terrible.
CSS
#aaa, #bbb, #ccc {
display:none;
}
The HTML (I use the same id name for option and div - is this incorrect?)
<select>
<option>Select</option>
<option id="aaa" value="aaa" onclick="showExtra(this)">AAA</option>
<option id="bbb" value="bbb" onclick="showExtra(this)">BBB</option>
<option id="ccc" value="ccc" onclick="showExtra(this)">CCC</option>
</select>
<div id="aaa">
<p>AAA is aaamazing</p>
</div>
<div id="bbb">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc">
<p>cccor blimey CCC</p>
</div>
The JavaScript
function showExtra(element)
{
I don't have clue .slideToggle("medium");
}

Get rid of the IDs in the <option> elements, they're not needed (or if they are, you need to rename them, e.g. optaaa, so they don't conflict with the IDs of the DIVs). Also, call the function from the dropdown's onchange event, not clicking on the options.
<select onchange="showExtra(this)">
<option>Select</option>
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
<option value="ccc">CCC</option>
</select>
Give all your DIVs a class, so you can operate on them as a group:
<div id="aaa" class="tab">
<p>AAA is aaamazing</p>
</div>
<div id="bbb" class="tab">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc" class="tab">
<p>cccor blimey CCC</p>
</div>
In the JS, you can then operate on all the DIVs that do or don't match the value.
function showExtra(option) {
var divID = option.value;
$(".tab:not(#"+divID+")").slideUp();
$(".tab#"+divID).slideDown();
}
DEMO

Hiding a class of Div depending on Select statement option

I'm fairly new to javascript and I'm trying to make an form for my website and I'm stuck on the javascript,
This is what I have:
<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
}
}
</script>
What I intended the script to do was recieve a variable (the option chosen by the user) and then reveal all the elements with the class of the same name (so if the option was orc the orc div would be displayed, but be hidden if the option chosen was elf etc.)
Html:
<form name="chargen" action="" method="post">
Name:<Input name="name" type="text" />
Gender:<select name="gender">
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>
<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>
<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>
<div class="human" style="display:none;">
Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>
<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>
Unfortunately nothing happens when I change the contents of the species combobox (I've tried on multiple browsers) What am I doing wrong?
I realise that getElementsByClassName() is a HTML5 function, but according to the interwebs it is compatible with all major browsers.
Thanks for your time

getElementsByClassName returns an array, you must iterate on the result. And be careful to the = in tests (instead of ==).
But I suggest you have a look at jquery. Your life will be easier as what you want can be done as :
$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();
(see fiddle : http://jsfiddle.net/dystroy/2GmZ3/)