We Keep Coding

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>

How do I hide options within a range of selects based upon changes in different select?

Related JSFiddle
<form id="calendar_form">
<div class="day1">
Day 1
<table class="selector_table">
<select name="select1">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select2">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
<br>
<div class="day2">
Day 2
<table class="selector_table">
<select name="select3">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select4">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
</form>
<script>
$("select").change(function(){
var selectThatWasChanged = $(this).attr('id');
var valueToRemove = $(this).val();
var dayWorkingWith = $(this).closest('.selector_table');
$('option', dayWorkingWith).not('#' + selectThatWasChanged + ' option');
$('option[value="' + valueToRemove + '"]').not('#' + selectThatWasChanged + ' option').hide();
});
</script>
I've been playing with this for an hour, and I'm frustrated. sigh. What I'm trying to accomplish is this: If PersonA is selected in Day1, he should not be available to pick again anywhere in Day1. However, PersonA should still be available on Day2.
Currently if PersonA is selected, PersonA is removed from all other selects. I tried to hone in on just the relevant selects by using the closest('.selector_table').
What am I doing wrong?
Thank you so much, in advance!
Bonus basic question: would it be tremendously more work to "undo" the change. For instance, if someone selects PersonA it hides PersonA as described, but then if PersonB is selected thereafter on the same select, it undoes that change and PersonA becomes available again?

Apply change event to the select Element, get the sibling select and disable it's matching option element.
$("select").change(function() {
const selectedOptionVal = $(this).find(":selected")[0].value;
const sibSelectEle = $(this).siblings('select');
sibSelectEle.children('option').each(function(_, option) {
if (selectedOptionVal == option.value) {
$(option).attr("disabled", true);
} else {
$(option).attr("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="calendar_form">
<div class="day1">
Day 1
<table class="selector_table">
<select name="select1">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select2">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
<br>
<div class="day2">
Day 2
<table class="selector_table">
<select name="select3">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
<select name="select4">
<option></option>
<option value="optionA">PersonA</option>
<option value="optionB">PersonB</option>
</select>
</table>
</div>
</form>

Show second dropdown menu on change of first selected

I am trying to create a dropdown that will show a second when the first is selected.
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20 Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxx Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#prob_type_1").change(function(){
correspondingID = $(this).find(":selected").val()
$(".warren").hide();
$("#" + correspondingID).show();
})
</script>
the second menu just isn't showing when either of these is selected...
fiddle: https://jsfiddle.net/wazzahenry/6af6jd83/
based on this :http://jsfiddle.net/dKMzk/
and from this question: Show a second dropdown based on previous dropdown selection

You have a style: none for your multiple select. To solve this, instead of using $("#" + correspondingID).show();, I will rather change the style of the element.
You are declaring your id with an espace character. It is as if you are declaring differents ids for the same element. To solve this, I removed the space character in the ids .
$("#prob_type_1").change(function(){
var correspondingID = $(this).find(":selected").val()
$(".warren").hide();
correspondingID = correspondingID.replace(" ", "")
$("#" + correspondingID).css("display", "inherit");
})
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxxAppliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

"Add" button stops working after deleting rows

I'm able to clone the #ingredient_1 div with the Add button. However, after pressing Add several times, then deleting random cloned divs with their specific X buttons, the Add button stops working.
I've replicated this problem across several browsers. Any advice would go a long way.
$('#add_more').click(function() {
var num = $('.clone').length;
var newNum = num + 1;
var newElem = $('#ingredient_1').clone().attr('id', 'ingredient' + '_' + newNum);
$('#ingredient_' + num).after(newElem);
});
$('#main').on('click', '.remove', function() {
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="ingredient_1" class="clone">
<select id="1">
<option selected="selected">Please Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<input type="text" name="name" placeholder="Amount" />
<select id="2">
<option selected="selected">Units</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<select id="3">
<option selected="selected">Time</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<button class="remove">X</button>
</div>
<div id="add_button">
<input type="button" id="add_more" value="Add" />
</div>
</div>

Once you delete the first row the element you're cloning no longer exists. Clone the element outside your click function so it's not overwritten:
var newElem = $('#ingredient_1').clone().attr('id', 'ingredient' + '_' + newNum);
var num = 1;
$('#add_more').click(function() { ... });
Also, declare your ID incrementor outside the function and simply add 1 each time the click function runs with num++. I'm guessing that it doesn't really matter what the ID values are, so as long as they're unique this works.

The problem is that you're using .length to calculate newNum. If you delete DIVs in the middle, you'll end up with duplicate IDs. For instance, suppose you first add 3 DIVs, you'll have DIVs numbered 1, 2, 3, 4. Then you delete #3. The next time you click Add, $(".clone").length will be 3, so you'll set newNum = 4;. But there's still a DIV with that ID.
Instead of using $(".clone").length, get the ID of $(".clone:last"), get the number at the end of it, and add 1 to that.

You're cloning, which if you have at least one static item, is fine. I fixed up your code so your initial row is hidden, and you have an ID variable that is auto incremented. On top of which, on load, it creates clones and creates the first row. Your back end code will just have to ignore a case where the style is set to display:none.
var id = 1;
$(function () {
var first = $('.clone');
first.attr('style', 'display:none');
NewRow();
});
$('#add_more').click(function () {
NewRow();
});
function NewRow() {
console.log('num = ' + id++);
var newElem = $('.clone:last').clone().attr('id', 'ingredient' + '_' + id + '_x');
newElem.attr('style', '');
$('.clone:last').after(newElem);
}
$('#main').on('click', '.remove', function () {
$(this).parent().remove();
});
You'll notice that I changed your click event to call the function NewRow(), this was done so that you can call a function in the Document.Ready event, as well as on the button click.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="ingredient_1" class="clone">
<select id="1">
<option selected="selected">Please Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<input type="text" name="name" placeholder="Amount" />
<select id="2">
<option selected="selected">Units</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<select id="3">
<option selected="selected">Time</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<button class="remove">X</button>
</div>
<div id="add_button">
<input type="button" id="add_more" value="Add" />
</div>
</div>
Working JSFiddle is here

Jquery/Js: Hide/Show Divs based on select box option values

These are Dynamic dependent select controls. The sets of values of (1-3, 4-6, 7-9) determine the use hide/show divs function. The problem is the function i have only hide/show depending on the div id. How can i make the function hide/show div depended on the values(1-3, 4-6, 7-9) found in the selectbox?
Jquery
$('#select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).find('option:selected').attr('id')).show();
});
Html Setup
<html>
<select size="6" id="category">
<option value="">categories 1-3 </option>
<option value="">----</option>
<option value="">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>

select the value from drop down change function and do the operation depends on the value of drop down, following is the sample code
$(function() // Shorthand for $(document).ready(function() {
$('select').change(function() {
if($(this).val() == 1)
{
$('#sub1').hide();
$('#sub2').show();
}
});
});

You nee to change minor change in your category select
<select size="6" id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
$('select#category').on('change', function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
can also use .change() instead of .on('change').
$('select#category').change(function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
NOTE:
$('div[id=^sub]:visible') will point to all divs that have id start with sub and visible.
You are trying with $('#select') which need to be $('#category') or $('select#category').
According to your comment:
Complete solution will look like following:
function isOnlyDashed(text) {
return text.replace(/-/g, '').length === 0;
}
$('select#category').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
}
});
$('select[name^=subc]').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$(this).parent() // jump to parent div
.next('div[id^=sub]:hidden') // go to next hidden div
.show();
}
});
Complete Workout

The problem with your code is that you have an incorrect selector.
$('#select')...
should be
$('select')...
Also, this part is wrong
$('#sub' + $(this).find('option:selected').attr('id')).show();
Replace it with this
$('#sub' + $(this).val()).show();
Finally, having different elements with the same name/id "sub1" is probably a bad idea, though technically not illegal. It is certainly confusing.

working demo http://jsfiddle.net/FwBb2/1/
I have made minor changes in your Jquery code as well as added value in your first select drop-down list which was missing rest hope this helps.
Please lemme know if I missed anything! B-)
code
$('select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).val()).show();
});​
HTML
<html>
<select id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>​