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

由于您说自己是javascript的新手，所以让我们使用纯粹的javascript方式来实现它。

您可以在选择HTML标记中添加onChange，每次更改其值时都会触发您传入的函数。

在函数内部，您可以根据选择的值，决定电子邮箱的新值，使用switch，if语句等。

要做你想做的事，你可以使用整数作为你提到的值。

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

Answer 2

您可以使用自定义属性执行此操作。看到这个小提琴：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";
    }   
}

根据下拉列表选择填充文本框 - JavaScript

2 个答案: