LearningJS888 LearningJS888 - 1 year ago 152
HTML Question

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:

<input type="text" id="email" readonly=>
<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>

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.

Answer Source

You can do it with custom attribute. See this fiddle: https://jsfiddle.net/y2t0utk7/


    <input type="text" id="email" />
    <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>


function setMail(){
    var ddl = document.getElementById("counties");
    var selectedOption = ddl.options[ddl.selectedIndex];
    var mailValue = selectedOption.getAttribute("data-mail");
    var textBox = document.getElementById("email");
        textBox.value = "first@email.com";
    else if(mailValue=="2"){
        textBox.value = "second@email.com";