We Keep Coding

Change value of selected option

I have dropdown select option countries:
<select name="country" id="countryId" required="required"
class="countries order-alpha form-control custom-select bg-white border-left-0 border-md">
<option value="">Select Country</option>
<option value="1"> Afghanistan</option>
<option value="2"> Aland Islands</option>
<option value="3"> Albania</option>
<option value="4"> Algeria</option>
<option value="5"> American Samoa</option>
When I select country on change I get value(numeric) send it to server and get States list that parse in States same happen with cities.
After fill all fields, formData.serialized and send to server. Server get numeric id of country, state and city But I want send Name of country/state/ city. So before send I should change selected value to selected text(country name).
I try change like that:
$("#countryId").change(function () {
c.countrytxt = $(this).find("option:selected").text(); // get text from option
var countryId = $("#countryId").val(); // save for send as paramet to server
document.getElementById('countryId').value = c.countrytxt; // try set county name to value
How could I achieve it?

Please try this instead.
$("#countryId").change(function () {
// get text from option
countrytxt = $(this).find("option:selected").text();
// save for send as paramet to server
var countryId = $("#countryId").val();
// try set county name to value
$(this).find("option:selected").attr('value',countrytxt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="countryId" required="required"
class="countries order-alpha form-control custom-select bg-white border-left-0 border-md">
<option value="">Select Country</option>
<option value="1"> Afghanistan</option>
<option value="2"> Aland Islands</option>
<option value="3"> Albania</option>
<option value="4"> Algeria</option>
<option value="5"> American Samoa</option>
</select>

HTML/JS/Django Hiding incompatible options from two picklists

I'm running a filter for my object on a django-run website.
I have two select fields, with dropdowns based on related models to my model that i'd like to sort.
The problem is that some options are incompatible with each another and i'd like to hide the options of the second picklist based on what the user has selected on the first one.
I feel like i am going to use some JS but i've never used it before.
1st picklist: tasks <option value = task_id>
2nd picklist: crafts <option value = craft_id>
I have prepared a dictionnary that holds all the compatible values of any option selected on the first picklist, if that can help !
useful_dictionnary = {
first_task_id = [list_of_compatible_craft_ids]
...
last_task_id = [list_of_compatible_craft_ids]
}
How can i get JS to look at the task_id selected on the first picklist, and hide the options from the second picklist that are not in this list ?
Would be great! Thanks !
Here is my picklists code, if that helps
<div class="form-group col-sm-4 col-md-3">
<label for="id_tasks">Tasks:</label>
<select class="form-control" id="id_tasks" name="task">
<option value="">---------</option>
<option value="1" selected="selected">Tie-job: Front-tie Marker</option>
<option value="2">Tie-job: Scrapmachine support trackman</option>
<option value="3">Tie-job: Plate Thrower</option>
<option value="4">Tie-job: New-tie Marker</option>
</select>
</div>
<div class="form-group col-sm-4 col-md-3">
<label for="id_craft">Craft:</label>
<select class="form-control" id="id_craft" name="craft">
<option value="" selected="selected">---------</option>
<option value="1">Senior Engineer</option>
<option value="2">Roadmaster</option>
<option value="3">Foreman</option>
<option value="4">Assistant Foreman</option>
<option value="5">Electrical Welder EA</option>
<option value="6">Oxygen Welder OA</option>
<option value="7">Railway Machine Operator (RMO)</option>
<option value="8">Truck Driver (Type A, B or C)</option>
</select>
</div>

This snippet should do the trick. Change compatibleIds to map the options for the second select based on the first one.
$(document).ready(function(){
$("#id_craft option:not([value=0])").hide();
});
$("#id_tasks").change(function(){
$("#id_craft").val("0");
$("#id_craft option:not([value=0])").hide();
var compIds = { 1: [ 1,2,3,4,5], 3 : [ 4,2,3,8,7], 4 : [ 7,9,1,5], 2 :[5,3,1,8]};
for(var i = 0; i < compIds[$("#id_tasks").val()].length; i++){
$("#id_craft option[value=" + compIds[$("#id_tasks").val()][i] + "]").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-4 col-md-3">
<label for="id_tasks">Tasks:</label>
<select class="form-control" id="id_tasks" name="task">
<option value="0" selected="selected">---------</option>
<option value="1">Tie-job: Front-tie Marker</option>
<option value="2">Tie-job: Scrapmachine support trackman</option>
<option value="3">Tie-job: Plate Thrower</option>
<option value="4">Tie-job: New-tie Marker</option>
</select>
</div>
<div class="form-group col-sm-4 col-md-3">
<label for="id_craft">Craft:</label>
<select class="form-control" id="id_craft" name="craft">
<option value="0" selected="selected">---------</option>
<option value="1">Senior Engineer</option>
<option value="2">Roadmaster</option>
<option value="3">Foreman</option>
<option value="4">Assistant Foreman</option>
<option value="5">Electrical Welder EA</option>
<option value="6">Oxygen Welder OA</option>
<option value="7">Railway Machine Operator (RMO)</option>
<option value="8">Truck Driver (Type A, B or C)</option>
</select>
</div>
Small add-on as the original question was about a django dictionary object:
To use a django list or dictionnary in the javascript, it is pretty straightforward as the {{ django_variable }} works fine inside the script tags.
So the final JS for this django template page is:
$(document).ready(function(){
$("#id_craft option:not([value=0])").hide();
});
$("#id_tasks").change(function(){
$("#id_craft").val("0");
$("#id_craft option:not([value=0])").hide();
var compatibleIds = {{ my_python_dictionary }};
for(var i = 0; i < compatibleIds[$("#id_tasks").val()].length; i++){
$("#id_craft option[value=" + compatibleIds[$("#id_tasks").val()][i] + "]").show();
}
});

Populate textbox based on Dropdown selection - JavaScript

I have a little question as I'm very new to JavaScript. I've made a dropdown containing various counties, and based on which county is selected, I want a specific email-address to populate a text field. I'm working with the following HTML form:
<div
<br>
Email:
<br>
<input type="text" id="email" readonly=>
</div>
<div>
<br>
Counties:
<br>
<select id="counties">
<option value="Choose One">Choose One</option>
<option value="Charlotte">Charlotte</option>
<option value="Collier">Collier</option>
<option value="Hillsborough">Hillsborough</option>
<option value="Lee">Lee</option>
<option value="Manatee">Manatee</option>
<option value="Pasco">Pasco</option>
<option value="Pinellas">Pinellas</option>
<option value="Polk">Polk</option>
<option value="Sarasota">Sarasota</option>
<option value="Brevard">Brevard</option>
<option value="Broward">Broward</option>
<option value="Indian River">Indian River</option>
<option value="Martin">Martin</option>
<option value="Miami-Dade">Miami-Dade</option>
<option value="Monroe">Monroe</option>
<option value="Palm Beach">Palm Beach</option>
<option value="St Lucie">St Lucie</option>
</select>
</div>
For the first 9 counties; I'd like them to go to "first#email.com
And for the remaining 8 counties; I'd like them to go to "second#email.com
I'm looking for some insight in how to add a value to the counties, and based on that value (Choose One = 0, first nine counties = 1, remaining eight = 2) I'd like to populate the text field with id="email" with the respective email.
How could I go about setting this up in JavaScript? Thanks in advance.

You can do it with custom attribute. See this fiddle: https://jsfiddle.net/y2t0utk7/
Html
<div>
Email:
<br>
<input type="text" id="email" />
</div>
<div>
<br>
Counties:
<br>
<select id="counties" onChange="return setMail()">
<option data-mail="0" value="Choose One">Choose One</option>
<option data-mail="1" value="Charlotte">Charlotte</option>
<option data-mail="1" value="Collier">Collier</option>
<option data-mail="1" value="Hillsborough">Hillsborough</option>
<option data-mail="1" value="Lee">Lee</option>
<option data-mail="1" value="Manatee">Manatee</option>
<option data-mail="1" value="Pasco">Pasco</option>
<option data-mail="1" value="Pinellas">Pinellas</option>
<option data-mail="1" value="Polk">Polk</option>
<option data-mail="1" value="Sarasota">Sarasota</option>
<option data-mail="2" value="Brevard">Brevard</option>
<option data-mail="2" value="Broward">Broward</option>
<option data-mail="2" value="Indian River">Indian River</option>
<option data-mail="2" value="Martin">Martin</option>
<option data-mail="2" value="Miami-Dade">Miami-Dade</option>
<option data-mail="2" value="Monroe">Monroe</option>
<option data-mail="2" value="Palm Beach">Palm Beach</option>
<option data-mail="2" value="St Lucie">St Lucie</option>
</select>
</div>
JS
function setMail(){
// find the dropdown
var ddl = document.getElementById("counties");
// find the selected option
var selectedOption = ddl.options[ddl.selectedIndex];
// find the attribute value
var mailValue = selectedOption.getAttribute("data-mail");
// find the textbox
var textBox = document.getElementById("email");
// set the textbox value
if(mailValue=="1"){
textBox.value = "first#email.com";
}
else if(mailValue=="2"){
textBox.value = "second#email.com";
}
}

Since you said you are new in javascript, let's use a pure javascript way to do it.
You can add an onChange to the select HTML tag and the function you passed in will be triggered every time you change its value.
Inside the function, you can base on the value of the selection, to decide what is the new value for the email box, using switch, if statement etc..
To do what you want, you can use integer be the value as you mentioned.
HTML:
<select id="counties" onchange="func()">
Javascript:
function func(){
var dropdown = document.getElementById("counties");
var selection = dropdown.value;
console.log(selection);
var emailTextBox = document.getElementById("email");
// assign the email address here based on your need.
emailTextBox.value = selection;
}
Demo

Already-selected items of dropdown/combo box should reflect as selected on click over Label

I am using label for attribute for input elements in my website that will help blind users. I have Combobox/Drop down in
my code to enter Date (Month/Day) format. Currently if there is only single drop down , for example Select Country, then on click on Label,
already selected country is reflecting as selected, that is okay. I have used this code of Jquery:
$(function () {
$('label').click(function () {
var id = $(this).attr('for');
$('#' + id).select();
});
});
But in Case of Date format as there are Child 'Label for' under Parent 'Label for' that is used for "ExpiryDate". So in this case
my upper written Jquery is not working.
That Jquery is working fine for Single Dropdown and for Teaxt boxes. But I want to select First child i.e. Month's already selected month should be
selected. Please assist me so that I can implement it. I want to handle that when user click over Label then TextBox, Single Dropdown and Combobox/Multiple related dropdown's already entered/selected items should
be shown as selected.
My HTML Code is here:
<div class="editor-label">
<label for="ExpiryDate">*Expiration Date</label>
</div>
<div class="editor-field">
<label class="accessibleText" for="ExpirationMonth">
<label for="ExpiryDate">*Expiration Date</label>
</label>
<select id="ExpirationMonth" name="ExpirationMonth" tabindex="0"><option value="">Month</option>
<option selected="selected" value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<label class="accessibleText" for="ExpirationDay">
<label for="ExpiryDate">*Expiration Date</label>
</label>
<select id="ExpirationDay" name="ExpirationDay" tabindex="0"><option value="">Day</option>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
I want to select only first child's already select items to shown as selected.

if you change your label for to point related select attribute like below for month and day it will select when you click label.
<label for="ExpirationMonth">*Expiration Date</label>
<select id="ExpirationMonth" name="ExpirationMonth" tabindex="0">

how to change jquery drop down value

On the basis of selection of Issue type i want to show 2nd drop down. if someone is select Board i want to show 2nd drop down and if someone select Branding i want to show different option. pls help
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>

In your select
<select name="issue_type" id="issue_type" onchange="change('issue_type');">
In your js file
$(document).ready(function(){
function change(id) {
//check condition if as
if ($('#' + id).val() == 'Board') {
//hide select except your required select
//like
$("#send_to").show().siblings().hide();
} else if () { // your next condition
//so on
}
}
});

here's jquery
$(document).ready(function(){
function changeVisibleSelect(elem){
var vis = $(elem).val() == 'Board';
$('#send_to' + (vis ? '_board' : '')).removeClass('hidden');
$('#send_to' + (vis ? '' : '_board')).addClass('hidden');
}
$('#issue_type').change(function(){
changeVisibleSelect(this);
});
changeVisibleSelect($('#issue_type'));
});
and minor edit to your html
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to_board">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
i changed the id of second select
css:
.hidden{display:none}
here's working jsfiddle: http://jsfiddle.net/MXjmY/1/