使用Javascript选择的样本数据自动填充表单

Question

我是Javascript的新手，正在尝试创建一个脚本来使用示例数据自动填充联系人表单。

目标是将预定值添加到不同的输入字段中。即用户选择"1600宾夕法尼亚大道西北华盛顿特区20500“-> "1600宾夕法尼亚”被添加到"StreetAddress“字段值中，依此类推。

我真的没有开始的想法，如果有人能给我指明正确的方向，我将非常感激。

提前感谢！

<div class="address-Form">
        <div class="sample-select-box">
            <select class="sample-select">
                <option>Select sample data set</option>
                <option value="select-1">Heilsbronner Strasse 4 91564 Neuendettelsau</option>
                <option value="select-2">1600 Pennsylvania Avenue NW Washington DC 20500</option>
                <option value="select-3">Champ de Mars 5 Av. Anatole France 75007 Paris</option>
                <option value="select-4">1 Queen's Rd W Sheung Wan Hong Kong</option>
            </select>
        </div>
            <div class="section-head">
                <div class="head">Input Fields</div>
                <div class="head">Values</div>
            </div>
                <form class="apiform">
                    <div id="TextBoxContainer">
                        <div class="apiform-field">
                            <div class="sample-select-box">
                                <label class="text">Street Address</label>
                            </div>
                <div class="field-value">
                    <label class="form-input">
                      <input type="text" name="data-value" placeholder="Street Address" class="sample-input" value="StreetAddress">
                    </label>
                </div>
         </div>
</div>

Answer 1

试试这个：HTML

<div class="address-Form">
            <div class="sample-select-box">
                <select class="sample-select" id="selectAddress" onchange="addSelect()">
                    <option value="">Select sample data set</option>
                    <option value="1600 Pennsylvania Avenue NW Washington DC 20500">Heilsbronner Strasse 4 91564 Neuendettelsau</option>
                    <option value="1600 Pennsylvania Avenue NW Washington DC 20500">1600 Pennsylvania Avenue NW Washington DC 20500</option>
                    <option value="Champ de Mars 5 Av. Anatole France 75007 Paris">Champ de Mars 5 Av. Anatole France 75007 Paris</option>
                    <option value="1 Queen's Rd W Sheung Wan Hong Kong">1 Queen's Rd W Sheung Wan Hong Kong</option>
                </select>
            </div>
                <div class="section-head">
                    <div class="head">Input Fields</div>
                    <div class="head" id="headId"></div>
                </div>
                    <form class="apiform">
                        <div id="TextBoxContainer">
                            <div class="apiform-field">
                                <div class="sample-select-box">
                                    <label class="text">Street Address</label>
                                </div>
                    <div class="field-value">
                        <label class="form-input">
                          <input type="text" name="data-value" id="sample-input" placeholder="Street Address" class="sample-input" value="StreetAddress">
                        </label>
                    </div>
             </div>

JS

document.getElementById('sample-input').value = "Street Address";
    document.getElementById('headId').innerHTML = "Values"
  function addSelect(){
    console.log(document.getElementById('selectAddress').value);
    if(document.getElementById('selectAddress').value === ""){
        document.getElementById('sample-input').value = "Street Address";
        document.getElementById('headId').innerHTML = "Values"
    }
    else {
        document.getElementById('sample-input').value = document.getElementById('selectAddress').value;
        document.getElementById('headId').innerHTML = document.getElementById('selectAddress').value
    }
    
  }