Заполнять текстовое поле на основе выпадающего списка - JavaScript

Question

У меня есть маленький вопрос, поскольку я очень новичок в JavaScript. Я создал раскрывающийся список, содержащий различные округа, и на основе выбранного графства я хочу, чтобы определенный адрес электронной почты заполнял текстовое поле. Я работаю со следующей формы HTML:

<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> 

За первые 9 округов; Я хотел бы, чтобы идти в «first@email.com

А для остальных 8 стран, я бы хотел, чтобы перейти к» second@email.com

Я ищу для некоторого понимания того, как добавить значение в графства, и на основе этого значения (выберите один = 0, первые девять графств = 1, остальные восемь = 2) Я бы хотел заполнить текстовое поле id = "email" с соответствующим электронным письмом. Как я могу настроить это в JavaScript? Заранее спасибо.

Answer 1

Вы можете сделать это с настраиваемого атрибута. Смотрите эту скрипку: 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"; 
    } 
} 

Answer 2

Поскольку вы сказали, что являетесь новичком в javascript, давайте использовать чистый javascript способ сделать это.

Вы можете добавить onChange в тег select HTML, и функция, с которой вы проходили, будет запускаться каждый раз, когда вы измените ее значение.

Внутри функции, вы можете опираться на ценности выбора, чтобы решить, что новое значение для почтового ящика, используя переключатель, если заявление и т.д ..

Чтобы сделать то, что вы хотите, вы можете use integer будет значением, как вы упомянули.

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