We Keep Coding

Show/hide dropdown 2 or dropdown 3 based on selected option from dropdown 1

I have 3 dropdowns in a form:
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
I need the second and third dropdown to appear/disappear based on selection of the first dropdown. 2 and 3 have to be hidden on page load, or when value 3 is selected on dropdown 1, but not just hidden from view, rather completely non-existant. I say this because jquery .show and .hide only makes an element disappear from display, it still stays inside the code and because of the "required" attribute inside those hidden dropdowns, form cannot submit.
I have tried this as well as many other answers I found, but had no luck...
<script>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').show();
$('#3').hide();
} else if ($(this).val() == '2') {
$('#3').show();
$('#2').hide();
} else {
$("#2").hide();
$('#3').hide();
}
})
</script>
Please help...
Edit:
Something along those lines:
<form id="form">
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<div id="here">
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</div>
</form>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').appendTo( "#here" );
$('#3').remove();
} else if ($(this).val() == '2') {
$('#3').appendTo( "#here" );
$('#2').remove();
} else {
$('#2').remove();
$('#3').remove();
}
})
I am not very good at jquery. This does what I want, but only once. I dont know how to bring them back once removed. For example, if I selected from #1: 1(Car) and from #2: 1(Small Car), #3 will be removed. But if i now decide to choose another option on #1 nothing happens. Also, on load, all 3 are shown, I wanted to keep #2 and #3 hidden until an option on #1 is selected.

Here's one way to go about it. Instead of using numbers as ID's, why not use a data-attribute. Each time a select option is chosen the code will show the next one in the sequence.
$(document).ready(() => {
$('select[data-order=1]').show()
let selects = $('select[data-order]');
selects.change(function() {
// get number
let num = +$(this).data('order');
// show the next select and hide all selects after that
selects.each(function(i,o) {
let thisNum = +$(o).data('order');
if (thisNum === num + 1) $(o).show().val(''); // show and reset the value
else if (thisNum > num + 1) $(o).hide();
})
})
})
select[data-order] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<select data-order='1' id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select data-order='2' id="2">
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select data-order='3' id="3">
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</form>

Select options based on another option selected

Im trying to select an option when i choose a specific option from list above. Any help how can achieve that?
Print of frontend
The main idea is, when i choose Field_Support, select option "94" from StardardTemplateID
My actual try:
$(document).ready(function () {
setTimeout(function () {
const Action = Core.Config.Get("Action");
const SupportedActions = ["AgentTicketNote"];
if ($.inArray(Action, SupportedActions) !== -1) {
if (Action === "AgentTicketNote") {
$('#DynamicField_QueueNote').on('change', function () {
const Option = $(this).val();
if (Option === '- Move -')
$('#Subject').val('');
else if (Option === 'Field_Support')
$('#Subject').val('Nota para Field');
else if (Option === 'Field_Support')
$("#StandardTemplateID").html("<option value='94'>dados_para_field</option>");
else if (Option === 'Helpdesk')
$('#Subject').val('Nota para Helpdesk');
else if (Option === 'Sistemas_Windows')
$('#Subject').val('Nota para Sistemas');
else if (Option === 'Networking')
$('#Subject').val('Nota para Networking');
});
}
}
})
});

Here's one way. Bake the value associations into the select option elements as data-attributes. Then just reference it on the change event.
$(document).ready(function() {
$('select#DynamicField_QueueNote').change(function() {
$('select#StandardTemplateID').val($(this).find('option:selected').data('link'))
$('#StandardTemplateID_Search').val($('select#StandardTemplateID').find('option:selected').text());
$('#Subject').val($(this).find('option:selected').data('subject'))
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
<option value="">-</option>
<option value="- Move -" selected="selected">- Move -</option>
<option value="Field_Support" data-link='94' data-subject='Nota para Field'>Field_Support</option>
<option value="Helpdesk" data-link='' data-subject='Nota para Helpdesk'>Helpdesk</option>
<option value="Sistemas_Windows" data-link='' data-subject='Nota para Sistemas'>Sistemas_Windows</option>
</select>
<hr>
<label>Subject</label>
<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate Validate_Required" aria-required="true">
<hr>
<label for="StandardTemplateID">Text Template:</label>
<div class="Field">
<div class="InputField_Container" tabindex="-1">
<div class="InputField_InputContainer"><input id="StandardTemplateID_Search" class="InputField_Search ExpandToBottom" type="text" role="search" autocomplete="off" aria-label="Text Template:" style="width: 273.333px;" aria-expanded="true"></div>
</div>
<select class="Modernize" id="StandardTemplateID" name="StandardTemplateID" style="display: none;">
<option value="">-</option>
<option value="71">1ª_Tentativa_Contacto</option>
<option value="72">2ª_Tentativa_Contacto</option>
<option value="73">3ª_Tentativa_Contacto</option>
<option value="80">Acesso_VPN_atribuido</option>
<option value="94">dados_para_field</option>
</select>
<p class="FieldExplanation">Setting a template will overwrite any text or attachment.</p>
</div>
<!--
<select id='select1'>
<option> Choose...</option>
<option value='option1' data-link='100'> Option 1 (link to 100)</option>
<option value='option2' data-link='133'> Option 2 (link to 133)</option>
<option value='option3' data-link='94'> Option 3 (link to 94)</option>
<option value='option4' data-link='120'> Option 4 (link to 120)</option>
</select>
<select id='select2'>
<option></option>
<option value='94'>Template 94</option>
<option value='100'>Template 100</option>
<option value='120'>Template 120</option>
<option value='133'>Template 133</option>
</select> -->

You can create a conditional that checks the value of the select on change and then sets the value of the input if the value of the select equals the target value.
Using jQuery:
$(document).ready(function() {
$('#StandardTemplate').change(function() {
if ($(this).val() === '94') {
$('#text_template').val($('option[value="94"]').text())
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>
Using Vanilla JS:
const sel = document.getElementById('StandardTemplate')
const input = document.getElementById('text_template')
sel.addEventListener('change', e => {
if(e.target.value === '94'){
document.getElementById('text_template').value = document.querySelector('option[value="94"]').textContent
}
})
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>

Show text based on option selected in dropdown

I have a dropdown like below.
<label for="form_name">Title</label>
<select class="bootstrap-select">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
<option value="4">Feature 4</option>
</select>
<div><p>Text1</p></div>
<div><p>Text2</p></div>
<div><p>Text3</p></div>
<div><p>Text4</p></div>
I intend to show Text 1 when Feature 1 is selected, Text 2 when Feature 2 is selected and so on.
Any ideas on how can I do this with JS (or jQuery)?
P.S. Most existing solutions require input field rather than options field or maybe I am too noob. xD

Give the p tags the id as the value of the options, and show the p tag when selected option has the value which is equal to the id of p
$('p').hide();
$('#1').show();
$('select').change(function() {
$('p').hide();
var a = $(this).val();
$("#" + a).show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="form_name">Title</label>
<select class="bootstrap-select">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
<option value="4">Feature 4</option>
</select>
<div>
<p id="1">Text1</p>
</div>
<div>
<p id="2">Text2</p>
</div>
<div>
<p id="3">Text3</p>
</div>
<div>
<p id="4">Text4</p>
</div>

function display(){
var e = document.getElementById("dropDownId");
var index = e.selectedIndex;
if(index==0){
document.getElementById("first").style.display = 'block'
document.getElementById("second").style.display = 'none'
}
else if(index==1){
document.getElementById("first").style.display = 'none'
document.getElementById("second").style.display = 'block'
}
}
<label for="form_name">Title</label>
<select class="bootstrap-select" id="dropDownId" onchange="display()">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
</select>
<div id="first"><p>Text1</p></div>
<div id="second" style="display: none;"><p>Text2</p></div>
Please run this snippet..and check out your solution..

With pure javascript
let select = document.querySelector("select");
let divs = document.querySelectorAll("div");
let result = document.querySelector("#result");
function func1(par){
result.innerText = divs[par - 1].innerText;
}
div:not(#result) {
display:none;
}
<label for="form_name">Title</label>
<select class="bootstrap-select" onchange="func1(this.value)">
<option value="1" selected="selected">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
<option value="4">Feature 4</option>
</select>
<div><p>Text1</p></div>
<div><p>Text2</p></div>
<div><p>Text3</p></div>
<div><p>Text4</p></div>
<div id="result"></div>

You can use ids on your div that you want to show and change the value of your select with the ids you choosed
$("#select-panel").change(function(){
updateDisplay();
})
function updateDisplay(){
var idToShow = $("#select-panel").find(":selected").val() || "div1";
$(".subcontent").each(function(){
$(this).css("display",$(this).is("#"+idToShow) ? 'block' : 'none');
})
}
updateDisplay();
.subcontent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-panel">
<option value="div1">1</option>
<option value="div2">2</option>
</select>
<div id="div1" class="subcontent">Text 1</div>
<div id="div2" class="subcontent">Text 2</div>

Scripting select elements with javascript

I find it difficult to style and even add event listeners for the html select element.
Expected Behavior
I want to alert the text content of a select option.
This is the HTML code:
<select name="chooseSub" id="chooseSub" placeholder="Here we go">
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>
And this is the javascript code:
var select = document.getElementById('chooseSub');
select.addEventListener('click', function(event) {
if (event.target && event.target.nodeName === 'option') {
alert(event.target);
}
});
Actual Behavior
It does not do anything at all

Did you meen this?
var select = document.getElementById('chooseSub');
select.addEventListener('change', function(event) {
alert(event.target.selectedOptions[0].text);
});
<select name="chooseSub" id="chooseSub" placeholder="Here we go">
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>

function myFunction(opt){
alert(opt.options[opt.selectedIndex].text);
/*if you want value of selected option : alert(opt.options[opt.selectedIndex].value);*/
}
<select name="chooseSub" id="chooseSub" placeholder="Here we go" onChange='myFunction(this)'>
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>

update list of <select> from another <select multiple> using jquery

I am trying to update a <select> element when I select one or multiple values from another <select multiple> using jQuery. Here's my multiple select:
<select class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>

I hope this is what you are looking for,
$('select#first').change(function() {
$("select#second option:not(:first-child)").remove();
$(this).find("option:selected").each(function() {
$("select#second").append($(this).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select name="second" id="second">
<option value=''>Select 2</select>
</select>

Check this script https://jsfiddle.net/gpb5wx8h/5/
Jquery:
function chooseItems(item, placeholder){
$(item).change(function() {
var item = $(this);
console.log(typeof(item.val()));
if(typeof item.val() == 'object'){
$.each(item.val(), function(i,v){
var selectedItem = item.find('option[value="'+ v +'"]'),
selectedText = selectedItem.text();
selectedItem.detach();
$(placeholder).append('<option value="' + v +'">' + selectedText + '</option>')
})
}
})
}
$(document).ready(function() {
chooseItems('.choose-role','.placeholder-role');
chooseItems('.placeholder-role','.choose-role');
})
HTML:
<select class="form-control choose-role" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select class="form-control placeholder-role" multiple>
</select>

If you want to update select options by fetching data from the server end regarding the selected values in multiple select box then you can perform ajax operation and insert the result to the another select box which is to be updated.