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>

restart javascript variable when change div

I have two comboboxs and one button in multiple divs. I need to enable the button when the two comboboxs change. This is what I have currently as a Fiddle:
$size=$('select[name=size]');
$gender=$('select[name=gender]');
var op='';
var ep='';
$size.change(function() {
op =$(this).val();
myFunction(op,ep);
});
$gender.change(function() {
ep =$(this).val();
myFunction(op,ep);
});
function myFunction(p1, p2) {
if(p1 !='' && p2!='') {
$('.nextbutton1').prop('disabled',false);
} else {
$('.nextbutton1').prop('disabled', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="someclass">
<img src="onepic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
but when I change the div, the button from the second div is already enabled. How can I reset the variables from the script?

Container
- Combobox1
- Combobox2
- NextButton
Container
- Combobox1
- Combobox2
- NextButton
Loop through Containers and set event listeners for Comboboxes inside each Container separately
$('.someclass').each(function () {
setOnComboboxChange($(this));
});
function setOnComboboxChange($container) {
// Use var keyword to create functional scope variables
var $size = $container.find('select[name=size]');
var $gender = $container.find('select[name=gender]');
var $nextBtn = $container.find('.nextbutton1');
var op = '';
var ep = '';
$size.change(function () {
op = $(this).val();
myFunction(op, ep);
});
$gender.change(function () {
ep = $(this).val();
myFunction(op, ep);
});
function myFunction(p1, p2) {
if (p1 != '' && p2 != '') {
$nextBtn.prop('disabled', false);
} else {
$nextBtn.prop('disabled', true);
}
}
}
Demo on Codepen

just another solution,
you can assign class to each controls and then attach change event to the dropdowns,
and then find the button within parent container using jquery
HTML:
<div class="someclass">
<img src="onepic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
JS:
$(document).ready(function(){
$(".myFunction").change(function(){
var $this = $(this);
var $container = $($this.parent(".someclass"));
var $next = $($container.find(".nextbutton1"));
var $size = $($container.find(".size"));
var $gender = $($container.find(".gender"));
var p1 = $size.val();
var p2 = $gender.val();
if(p1 !='' && p2!='') {
$next.prop('disabled',false);
} else {
$next.prop('disabled', true);
}
});
});
fiddle: https://jsfiddle.net/xwgz3doj/

Javascript auto select from dropdown

I'm searching and searching and can not find anything exactly what I need.
So I need javascript, that will select option from dropdown, but not by the option value number, but name.
I have:
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?

For you is it like;
var options = document.getElementsByClassName("aa")[0].options,
name ="Jawor";
for(i = 0; i < options.length; i++){
if(options[i].text.indexOf(name) > -1){
options[i].selected = true;
break;
}
}
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

U need to Use onChange Event Handler ... for example
<select onchange="showSelected()">
Then write your script ...
<script>
function showSelected(){
var s=document.getElementById('local'); //refers to that select with all options
var selectText=s.options[s.selectedIndex].text // takes the one which the user will select
alert(selectText) //Showing the text selected ...
}
</script>
Rest of your code is okay !
<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

Using jquery here. You can use the following function:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
}
})
}
A demo:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
return false;
}
})
}
//use the function
setTimeout(function() {
selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
selectFromDropdown('#local', '• Jawor')
}, 4000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
<option value="">Select</option>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

for chrome console use this
document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';

Display modal on valid select option

I'm using jQuery to make a modal pop up when an option is selected in my dropdown list, however, I can't get it to refrain for working when the "default" option is selected (which has an empty value).
My HTML
<div class="dropdownPanel">
<select name="countryList" id="countryList">
<option value="" disabled selected>SELECT</option>
<option value="argentinia">Argentinia</option>
<option value="brazil">Brazil</option>
<option value="chile">Chile</option>
<option value="mexico">Mexico</option>
<option value="venezuela">Venezuela</option>
</select>
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
JS
$('.dropdownPanel button.confirm').on('click', function() {
if (!($('option[value=""]:selected'))) {
$('.modal').css('display', 'block');
}
});
I've also tried...
$('.dropdownPanel button.confirm').on('click', function() {
if ($('#countryList option').val() > 0) {
$('.modal').css('display', 'block');
}
});
Any thoughts on what I'm missing?

UPDATED: http://jsfiddle.net/bluey/bbS8v/
The Html
<div class="dropdownPanel">
<select name="countryList" id="countryList">
<option value="0" disabled selected>SELECT</option>
<option value="argentinia">Argentinia</option>
<option value="brazil">Brazil</option>
<option value="chile">Chile</option>
<option value="mexico">Mexico</option>
<option value="venezuela">Venezuela</option>
</select>
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
JQuery
$('.confirm').click( function() {
var val = $("#countryList").val();
if (val!=0) {
$('.modal').show();
// alert(val); //test
}
return false;
});

$('.dropdownPanel button.confirm').on('click', function() {
if (!($('option[value=""]:selected'))) {
$('.modal').css('display', 'block');
}
return false;
});

how to disable <select> based on user selection in another <select>

i have two <select>, named category and category_sport
i want <select name='category_sport'> disable , if i click <option>sport</option> in <select name='category'> , i want enable <select name='category_sport'>
Anyone have an idea how ?
function disable()
{
document.getElementById("katOl").disabled=true;
}
function enable()
{
document.getElementById("katOl").disabled=false;
}
the script above is used in <option> ex:
<select name='category'>
<option value="1" onclick='enable()' >sport</option>
</select>
<select id='katOl' name='category_sport'>
<option value="1">Football</option>
</select>
but isn't work

try something like this
javascript
function check(val)
{
if(val == '1'){
document.getElementById("katOl").disabled=true;
}else{
document.getElementById("katOl").disabled=false;
}
}
html
<select name='category' onchange="check(this.value)">
<option value="" >SELECT</option>
<option value="1" >sport</option>
</select>

assuming that your looks like this :
<select name='category_sport' id="katOl"> ... </select>
HTML:
<select id="myselect" name='category' onchange="changeSelect()">
<option value="1">sport</option>
</select>
Javascript:
function changeSelect(){
var mySelect = document.getElementById("myselect");
var selectedValue = e.options[myselect.selectedIndex].value;
if(selectedValue=="1") //sport
{
document.getElementById("katOl").disabled=false;
}
}

try like this
$("#category").change(function(){
if($(this).val()=="yourvalue"){
disable();
}else{
enable();
}
});

You can try this:
$(document).ready(function(){
$('select[name=category]').change(function(){
if($(this).val() === '1'){
$('#katOl').prop('disabled', false);
} else {
$('#katOl').prop('disabled', true);
}
});
});
DEMO Link

use onChange event of select tag instead.
<select onChange="set_sport_cat(this)">
<option value="1">sport</option>
<option value="2">whatever</option>
</select>
function set_sport_cat(my){
alert("test");
if(my.options[0].selected){
alert("1");
}else{
alert("2");
}
}
http://jsfiddle.net/3A6X4/

HTML CODE:
<select name='category' id="category">
<option value="1">sport</option>
<option value="2">education</option>
</select>
<select id='katOl' name='category_sport'>
<option value="1">Football</option>
</select>
js Code:
(function(){
var cat = document.getElementById('category'),
katOl = document.getElementById('katOl');
cat.onchange = function() {
var v = cat.value;
if(v === '1') {
katOl.setAttribute('disabled', 'disabled');
} else {
katOl.removeAttribute('disabled');
}
}
})();

A much simpler and fun approach:
LIVE DEMO
<select name='category'>
<option>Sport</option>
<option>Food</option>
<option>Travel</option>
</select>
<select name='category_sport'>
<option>Football</option>
</select>
<select name='category_food' disabled>
<option>Pizza</option>
</select>
<select name='category_travel' disabled>
<option>Croatia</option>
</select>
jQuery:
$('select[name=category] option').click(function(){
var val = this.value.toLowerCase(); // "Sport" >> "sport"
$('select[name^=category_]').prop('disabled', 1); // Disable all
$('select[name=category_'+ val +']').prop('disabled', 0); // Enable
});

Here is my solution:
HTML:
<select name="category" onchange="alterSelection(event)">
<option value="">----</option>
<option value="1">Sport</option>
<option value="2">Food</option>
</select>
<select id="katOl" name="category_sport" disabled="disabled">
<option value="1">Football</option>
<option value="2">Cricket</option>
</select>
JS:
function alterSelection(e){
if( e.target.selectedIndex==1 ){
document.getElementById("katOl").disabled=false;
}else{
document.getElementById("katOl").disabled=true;
}
}