We Keep Coding

Automatically changing input values when selected a new element

How can I get input values to change dynamically when I select some element from select tag. I want in this input box to be shown a proper value when I change select option.
<select onchange="changevalue()" id="selectingg">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>

You could use addEventListener on change event and get the value from the event.target dropdown like so:
document.getElementById("dropdownCategory").addEventListener('change', event => document.getElementById('categorySelected').value = event.target.value);
<select id="dropdownCategory">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
</select>
<input type="text" id="categorySelected"></input>

The below code is working fine for me you may try this code.
In below code I am assigning select value to input tag value.
function changevalue(){
document.getElementById("inputting").value =
document.getElementById("selecting").value;
}
<select onchange="changevalue()" id="selecting">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>

How to show column values based on column names in two dropdown menus

I have a drop down menu; having column names from database table. Now, I have another dropdown menu.
What I want is; When I select column name from first dropdown menu, It shows the values of that selected column name from database table in second dropdown menu.
I have inserted column names for the first dropdown menu in options tag but i want to retrieve all column values based on selected column name from database table.
Here is my code:
<select name="first">
<option selected="true" disabled="disabled">Select an Option</option>
<option value="all">Select All</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
Where a,b,c,d are the column names. Please help me out.

You can try like this
HTML:
<select name="category">
<option value="0">None</option>
<option value="1" rel="accessories">Novels</option>
<option value="2" rel="sports">Scooties</option>
<option value="3" rel="cars">Bikes</option>
</select>
<select name="items" class="cascade">
<option value="3" class="accessories">Immortals of meluha/option>
<option value="8" class="accessories">Half Girlfriend</option>
<option value="1" class="sports">Active 5G</option>
<option value="4" class="sports">Active 4G</option>
<option value="6" class="cars">Royal Enfield</option>
<option value="2" class="cars">Pulsor</option>
</select>
JQUERY :
$(document).ready(function(){
var $cat = $('select[name=category]'),
$items = $('select[name=items]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);
});
});

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

jQuery fetch disabled select option value

<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">
Here option Test Two is selected and disabled. The below code fetches select value when dropdown is enabled and value is changed.
//pass value to hidden input
$('#test_me').change(function () {
var id = $(this).val();
$('input#test_hidden').val(id);
})
How can I pass selected option value i.e. 2 to my hidden input, when dropdown is disabled and value is selected ?

This issue is reported at http://bugs.jquery.com/ticket/13097 and marked as wont fix. for reason:
The long-standing logic in .val() ensures that we don't return disabled options in a select-multiple. The change just applies the same behavior for select-one now for consistency.
Alternative for this would be to use selectedindex property of select to target option by index:
$("#test_me option").eq($("#test_me").prop("selectedIndex")).val();
Complete Snippet:
var id = $("#test_me option").eq($("#test_me").prop("selectedIndex")).val();;
$('input#test_hidden').val(id);

<script type="text/javascript">
//pass value to hidden input
$(document).ready(function(e) {
var sel = $("#test_me").val();
$("#test_hidden").val(sel);
});
</script>
<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">

How can I check if Dynamically created Select Boxes have been selected

I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>

Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}