javascript - 使用 select 自动填充多个表单域

Question

我正在尝试根据选择框自动填写表单。基本上，当用户选择一家公司时，我希望表单根据他们的选择自动填充其余字段（下例中的“公司 A”或“公司 B”）。

我不确定我是否在正确的轨道上，或者是否有可能。我确定需要额外的 javascript。任何建议将不胜感激。

COMPANIES.JSON_REP = {
    "companies":[
        {
            "company": "Company A",
            "phone": "[phone]",
            "address":{
                "addressOne": "84 Rainey St",
                "city": "Arlen",
                "state": "TX",
                "postalCode": "78104",
            }
        },
        {
            "company": "Company B",
            "phone": "[phone]",
            "address":{
                "addressOne": "1640 Riverside Dr",
                "city": "Hill Valley",
                "state": "CA",
                "postalCode": "91905",
            }
        }
    ]
};

<form method="POST" action="">
    <div class="field">
        <label for="company">Company</label>
        <select id="company" name="company" required>
            <option value="">Company A</option>
            <option value="">Company B</option>
        </select>
    </div>

    <div class="field">
        <label for="phone">Phone</label>
        <input type="text" id="phone" name="phone">
    </div>

    <div class="field">
        <label for="addressOne">Street Address*</label>
        <input type="text" id="addressOne" name="addressOne" required>
    </div>

    <div class="field">
        <label for="addressTwo">Apt, suite, etc (optional)</label>
        <input type="text" id="addressTwo" name="addressTwo">
    </div>

    <div class="field">
        <label for="city">City*</label>
        <input type="text" id="city" name="city" required>
    </div>

    <div class="field">
        <label for="state">State*</label>
        <select id="state" name="state" required>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DC">District of Columbia</option>
            <option value="DE">Delaware</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>
    </div>

    <div class="field">
        <label for="postalCode">Zipcode*</label>
        <input type="text" id="postalCode" name="postalCode" required>
    </div>

    <div class="field">
        <button type="submit">Send</button>
    </div>
</form>

标签： javascripthtmljson

Answer 1

您可以使用这样的 JS 函数：

function updateFields(addressId) {
  document.getElementById('phone').value = COMPANIES.JSON_REP.companies[addressId].phone;
  document.getElementById('city').value = COMPANIES.JSON_REP.companies[addressId].address.city;
  /* more fields */
}

并将您的更改select#company如下：

<select id="company" name="company" onchange="updateFields(document.getElementById('company').value)" required>
  <option value="0">Company A</option>
  <option value="1">Company B</option>
</select>

换句话说，当用户在选择输入中选择不同的选项时，您需要一些函数来改变输入的值。为此，您的选择应onchange使用参数触发函数document.getElementById('company').value- 它自己的值。该值表示COMPANIES.JSON_REP.companies数组键。