使用 Javascript 将省或州值传递给隐藏字段答案

【问题标题】：Pass Province or State value to hidden field with Javascript使用 Javascript 将省或州值传递给隐藏字段
【发布时间】：2022-01-10 02:56:13
【问题描述】：

我是 javascript 新手，找不到易于理解的答案。当用户从 2 个不同的选择下拉选项中选择某个选项时，我希望将某个值传递给隐藏字段。他们只能在实际表格中选择一个或另一个。

例如，如果用户选择美国的州或加拿大的省，我想使用 javascript 将该值传递给隐藏的文本字段。

<form>
 <p class="form-field state pd-select required">
  <label class="field-label" for="usstatevalue">State</label>
  <select name="usstatevalue" id="usstatevalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47815">AL</option>
   <option value="47817">AK</option>
   <option value="47819">AZ</option>
   <option value="47821">AR</option>
   <option value="47823">CA</option>
   <option value="47825">CO</option>
   <option value="47827">CT</option>
   <option value="47829">DE</option>
   <option value="47831">DC</option>
   <option value="47833">FL</option>
   <option value="47835">GA</option>
   <option value="47837">HI</option>       
  </select>
 </p>
 <p class="form-field Province_Canada pd-select required">
  <label class="field-label" for="provcanvalue">Province – Canada</label>
  <select name="provcanvalue" id="provcanvalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47791">Alberta</option>
   <option value="47793">British Columbia</option>
   <option value="47795">Manitoba</option>
   <option value="47797">New Brunswick</option>
   <option value="47799">Newfoundland and Labrador</option>
   <option value="47801">Nova Scotia</option>
   <option value="47803">Nunavut</option>
   <option value="47805">Ontario</option>
   <option value="47807">Prince Edward Island</option>
   <option value="47809">Quebec</option>
   <option value="47811">Saskatchewan</option>
   <option value="47813">Yukon</option>
  </select>
 </p>
 <p class="form-field  State_Province">
 <label for="stateprovnew">hidden field</label>
  <input type="text" name="stateprovnew" value="">
 </p>
</form>

【问题讨论】：

标签： javascript html jquery forms

【解决方案1】：

以下代码会将所选州和国家/地区插入文本字段。您可以将字段隐藏起来。

var stateSelector = document.getElementById('usstatevalue');
var countrySelector = document.getElementById('provcanvalue');
var hiddenSelector = document.getElementById('stateprovnew');

stateSelector.addEventListener('change', function() {
  hiddenSelector.value = stateSelector.value;
});

countrySelector.addEventListener('change', function() {
  hiddenSelector.value += ' ' + stateSelector.value;
});

<form>
 <p class="form-field state pd-select required">
  <label class="field-label" for="usstatevalue">State</label>
  <select name="usstatevalue" id="usstatevalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47815">AL</option>
   <option value="47817">AK</option>
   <option value="47819">AZ</option>
   <option value="47821">AR</option>
   <option value="47823">CA</option>
   <option value="47825">CO</option>
   <option value="47827">CT</option>
   <option value="47829">DE</option>
   <option value="47831">DC</option>
   <option value="47833">FL</option>
   <option value="47835">GA</option>
   <option value="47837">HI</option>       
  </select>
 </p>
 <p class="form-field Province_Canada pd-select required">
  <label class="field-label" for="provcanvalue">Province – Canada</label>
  <select name="provcanvalue" id="provcanvalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47791">Alberta</option>
   <option value="47793">British Columbia</option>
   <option value="47795">Manitoba</option>
   <option value="47797">New Brunswick</option>
   <option value="47799">Newfoundland and Labrador</option>
   <option value="47801">Nova Scotia</option>
   <option value="47803">Nunavut</option>
   <option value="47805">Ontario</option>
   <option value="47807">Prince Edward Island</option>
   <option value="47809">Quebec</option>
   <option value="47811">Saskatchewan</option>
   <option value="47813">Yukon</option>
  </select>
 </p>
 <p class="form-field  State_Province">
 <label for="stateprovnew">hidden field</label>
  <input type="text" name="stateprovnew" id="stateprovnew" value="">
 </p>
</form>

【讨论】：

太棒了！感谢您的回复。我不得不做一个小的调整来反映最后一个 hiddenSelector 的 provcanvalue 但这与我正在寻找的非常接近。有没有办法让选项字符串“名称”而不是“值”？
这也很容易。只需调整代码。 stateSelector.addEventListener('change', function(evt) {console.log( stateSelector.selectedIndex ); hiddenSelector.value = stateSelector.options[ stateSelector.selectedIndex ].text; });