Develop Reference

How to create a dropdown list to Select Day and Display Iframe tag linked to each day

I am trying to build a HTML page that prompts the user to select a day from a drop down list. On selecting an option, I want the page to shows the schedule for that day. There are seven schedules that are defined in seven iframe tags.
I put together the code to select the Day but I am unable to figure out two things
How to place /code the relevant iframe tags with conditional statements?
How to show the relevant iframe without having to press the submit button?
To give some context, I am doing this for a school that allows students to select the day and know the schedule for the day.
<form>
<label for="day">Choose a Day:</label>
<select name="dayapp" id="dayapp">
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<br><br>
<input type="submit" value="Submit" onclick="showlist()">
</form>

$("#dayapp").change(function() {
// cheacks value of option on change
if ($(this).val() == "Monday") {
// if its some day do next:
$("iframe,span,br ").remove();
//removes previsuly added iframe (and for testing perpuspes i added span and new line)
$( "#addiframe" ).append( " <span>Monday</span><br> <iframe id='Monday' src='https://www.w3schools.com' title='W3Schools Free Online Web Tutorials'></iframe>" );
//adds iframe (and for testing perpuspes span and new line)
}
if ($(this).val() == "Tuesday") {
$("iframe,span,br ").remove();
$( "#addiframe" ).append( " <span>Tuesday</span><br><iframe id='Tuesday' src='https://www.w3schools.com' title='W3Schools Free Online Web Tutorials'></iframe>" );
}
//etc
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="day">Choose a Day:</label>
<select name="dayapp" id="dayapp">
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<br><br>
<input type="submit" value="Submit" onclick="showlist()">
</form>
<div id="addiframe"></div>

After changing the last dropdown from 3 drop down, completely a copy of the all 3 drop down comes without having the first dropdown value

The below is my 3 drop down section.I want to change in the 3rd drop down which having the values AND/OR. After changing the drop down there will be another clone of all the 3 same drop down filed will come and condition is only in the clone section for first select field the value shouldn't be there which was previously chosen(If I choosen Category in first select, then in the clone section for first select field there willn't be any Category section).
Also as per there is 3 option value in first select and those are (Category, Genre and Cast), so while on changing the AND/OR section we can only clone 2 more div, except the first one.
Also, if we already chosen Category section in first section and then we choose AND/OR option field then other 2 option will vanish from the first select field. Similarly it will proceed like this
I have got some how to clone it, but can't do exactly what our requirement. Below is my HTML and js code.
**HTML**
<div class="radio">
<input type="radio" id="test2" name="specific_content" value="2">
<label for="test2">
<div class="col-md-4">
<select class="form-control" id="content-form" name="content_form">
<option selected disabled hidden>Select</option>
<option value="category">Category</option>
<option value="genre">Genre</option>
<option value="cast">Cast</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control content-type-section" id="content_type" name="content_type" disabled="disabled" onchange="removeDisableFromCondition(this)">
<option selected disabled hidden>Select</option>
<option value="123">Movie</option>
<option value="321">TV</option>
<option value="345">Cast</option>
<option value="987">Genre</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control condition-section" id="sel1" name="conditions" disabled="disabled" onchange="showAnotherSection()">
<option selected disabled hidden>Select</option>
<option value="1">AND</option>
<option value="2">OR</option>
</select>
</div>
<div id="cloned_copy">
</div>
JS
$(document).ready(function() {
$('#sel1').change(function() {
var selectedVal = $('#content-form').val();
var target = $("#cloned_copy");
target.empty();
$("#content-form").clone().appendTo(target);
$("#cloned_copy option[value='"+ selectedVal +"']").remove();
});
});
After choosing AND/OR select drop down

Disabling select input depending on previous select option

What I'm trying to achieve here is this: I have a select input that has 3 options : Sale, Rent, Wanted. Depending on which option is selected, there are 3 other select inputs. So lets say I choose Sale then it should show the property sale select input and hide the other two, if I choose Rent then it should show the property rent select input and the hide the other two.
The hiding works well but my issue is when i submit for search using GET, it passes the data of the two other hidden select inputs because they are not disabled. I tried disabling them depending on selection as shown in the below code but it didn't work. Any help?
Here is my code:
<script type="text/javascript">
$('#type').on('change',function(){
if( $(this).val() === "sale"){
$("#propertyrent").hide();
$("#propertywanted").hide();
$("#pricetype").show();
$("#propertysale").show();
document.getElementById("propertyrent").disabled=true;
document.getElementById("propertywanted").disabled=true;
}
else if( $(this).val() === "rent"){
$("#pricetype").hide();
$("#propertyrent").show();
$("#propertywanted").hide();
$("#propertysale").hide();
document.getElementById('propertysale').disabled=true;
document.getElementById('propertywanted').disabled=true;
}
else if( $(this).val() === "wanted"){
$("#pricetype").hide();
$("#propertyrent").hide();
$("#propertywanted").show();
$("#propertysale").hide();
document.getElementById('propertyrent').disabled=true;
document.getElementById('propertysale').disabled=true;
}
});
</script>
<label class="col-sm-3 control-label">Type</label>
<select name="type" id="type">
<option value="sale">Sale</option>
<option value="rent">Rent</option>
<option value="wanted">Wanted</option>
</select>
<div id="propertysale">
<label class="col-sm-3 control-label">Property</label>
<select name="propertysale" id="propertysale" class="form-control col-sm-12">
<option value="all">Any</option>
<option value="houses">Houses</option>
<option value="apartments">Apartments</option>
<option value="land">Land</option>
<option value="buildings">Buildings</option>
<option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
</select>
</div>
<div id="propertyrent" style="display:none;">
<label class="col-sm-3 control-label">Property</label>
<select name="propertyrent" id="propertyrent" class="form-control col-sm-12">
<option value="all">Any</option>
<option value="houses">Houses</option>
<option value="apartments">Apartments / Flats</option>
<option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
</select>
</div>
<div id="propertywanted" style="display:none;">
<label class="col-sm-3 control-label">Property</label>
<select name="propertywanted" id="propertywanted" class="form-control col-sm-12">
<option value="all">Any</option>
<option value="houses">Houses</option>
<option value="apartments">Apartments</option>
<option value="land">Land</option>
<option value="buildings">Buildings</option>
<option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
</select>

Use jQuery selector for any input inside div to disabling them:
$("#yourDiv input, #yourDiv select").prop("disabled", true);
To remove disabled: prop("disabled", false);

here div and your selectbox id is same 'propertyrent','propertywanted','propertysale' change this.
and when you hide or disable selectbox set value blank of select box

The problem is, you are not disabling the select menu. You are disabling the div that contains the select menu
<div id="propertyrent" style="display:none;">..
<select name="propertyrent" id="propertyrent" c...
Use different id for both. It will work

How to unhide select tag HTML?

I am trying to do the following in HTML and JavaScript:
I am using Select tag (HTML) that will be hidden until a user clicks on No.
If the user click on No, then the Select options appears and if the user select Yes, the Select options disappear. This function works great with input and other tags, but not select tag.
I did a lot of research and I found out that the display:none and select tag does not work with Google Chrome and IE, but all the solutions were given in JQuery and ASP.net. Since I am still new to all of this, I was wondering if there is a solution using HTML and JavaScript?
Code HTML:
<div id="divMetSpec" class="fieldRow">
<div class="leftLabel labelWidth20">
<label for="">Met Spec Upon Return:</label>
</div>
<div class="leftField">
<div class="formField68">
<input id="rbMetSpec" name="rbMetSpec" type="radio"
class="radiobuttonfield" alt="Met Spec" title="Met Spec" value="Yes"
onclick="javascript:KitFailure();" />Yes
<input id="rbMetSpec1" name="rbMetSpec" type="radio"
class="radiobuttonfield" alt="Met Spec" title="Met Spec" value="No"
onclick="javascript:KitFailure();" />No
</div>
</div>
</div>
<div id="KitFailure" style="display:none">
<p class="indent">To select multiple options - Please hold down the Ctrl
button to select:</p>
<div class="leftLabel labelWidth20">
<label for="txtKitFailure">Specify Failure:</label>
</div>
<div class="leftField">
<div class="formField40">
<select id="txtKitFailure" type="text" class="fieldRow"
name="KitFailure" multiple size="5">
<option value="Failure1">Failure 1</option>
<option value="Failure2">Failure 2</option>
<option value="Failure3">Failure 3</option>
<option value="Failure4">Failure 4</option>
<option value="Failure5">Failure 5</option>
<option value="Failure6">Failure 6</option>
<option value="Failure7">Failure 7</option>
<option value="Failure8">Failure 8</option>
</select>
</div>
</div>
</div>
Code JavaScript:
function KitFailure() {
if (document.getElementById('rbMetSpec1').checked) {
document.getElementById('KitFailure').style.display = 'none';
} else document.getElementById('KitFailure').style.display = 'block';
}
Thank you in advance for your help.
Irene

It works as is in IE11 + emulations, FF, Chrome, and Safari for Windows.
Some corrections:
type="text" is not valid attribute of select
Also use multiple="multiple"
Alt is not valid attribute of input

Update text in single textfield with multiple drop down boxes with javascript client side

EDIT: Ok, I really want to get this so I've decided to simplify what I need. I have one textbox that onclick updates a textfield. Now, what I need it to do is when they click on a second dropdown it will update a portion of text in the same textfield. Hope this helps.
<script type="text/javascript"><!--
function OnSelectionChanged(listBox) {
var textInput = document.getElementById("dn");
textInput.value = listBox.value;
}
//--></script>
</head>
<body>
<ul id="menu">
</ul>
<div id="main" class="view">
<h1>Text</h1>
<div id="intro"><h5>Text</h5>
<div id="content"><h2>Text:</h2>
<p>Text</p>
</div>
<form method="POST" action="submit" name="myForm"><fieldset>
<legend>Text</legend>
<label>[?]
Disposition Code<br />
<select size="1" name="disposition" id="drp_dwn" onchange="OnSelectionChanged (this)">
<option value="-1" selected>——Select one——</option>
<option value="Text ">190</option>
<option value="191">191</option>
<option value="192">192</option>
<option value="195">195</option>
<option value="270">270</option>
<option value="300">300</option>
<option value="340">340</option>
<option value="350">350</option>
<option value="370">370</option>
<option value="380">380</option>
<option value="381">381</option>
<option value="382">382</option>
<option value="383">383</option>
<option value="384">384</option>
<option value="400">400</option>
<option value="401">401</option>
<option value="402">402</option>
<option value="403">403</option>
</select>
</label>
<label>[?]
Cause Code<br />
<select size="1" name="cause">
<option value="-1" selected>——Select one——</option>
<option value="">Cause - 190</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</label><br /><br />
<label><!--[?] -->
Disposition Narrative
<textarea id="dn" rows="8" cols="30" name="dn"></textarea>
</label>
Im still getting used to how stack overflow wants us to format the code but hopefully you guys can read it well enough to help find a solution. Thanks again.

All I can really give you at this point is
Attach onchange handlers to your drop downs. Your handlers will
add/replace the text.
Use regular expressions to replace text when dd2 and dd3 change.
If you can provide more details about the text you want to replace then someone will be able to help you with your regular expressions.