需要在一个选择的HTML / JS上显示两个单独的信息

debugcn 发表于 Dev

卡洛·维洛里亚（Carlo Viloria）

选择一个选项时，我需要在两个文本字段中显示这两个数组。现在发生的是它仅显示第一个数组，在选择创建国家/地区时，需要在输入标签上显示两个数组。

var host_country_start = {
  "Afghanistan":"21-Dec_start",
  "Albania":"01-Jan_start",
  "Algeria":"01-Jan_startz",
};
var host_country_end = {
  "Afghanistan":"21-Dec_end",
  "Albania":"test_end",
  "Algeria":"test2_end",
};

var selectbox = document.getElementById('host_country');
var textbox = document.getElementById('host_country_date');

selectbox.addEventListener('change', function(e){
  textbox.value = host_country_start[this.value]
})

<span id="s_home_country">                   
  <select name="Host Country" id="host_country">
    <option value="Select one" selected="selected">Select one</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
  </select>
</span>

<label>Start Date:</label><input id="host_country_date" type="text" />
<label>End Date:</label><input id="host_country_end_date" type="text" />

善良的用户

您必须将引用添加到另一个数组，并将其包括在您的代码中。

var host_country_start = {
  "Afghanistan":"21-Dec_start",
  "Albania":"01-Jan_start",
  "Algeria":"01-Jan_startz",
};
var host_country_end = {
  "Afghanistan":"21-Dec_end",
  "Albania":"test_end",
  "Algeria":"test2_end",
};

var selectbox = document.getElementById('host_country');
var textbox = document.getElementById('host_country_date');
var textbox2 = document.getElementById('host_country_end_date');

selectbox.addEventListener('change', function(e){
  textbox.value = host_country_start[this.value];
  textbox2.value = host_country_end[this.value];
})

<span id="s_home_country">                   
  <select name="Host Country" id="host_country">
    <option disabled value="Select one" selected="selected">Select one</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
  </select>
</span>

<label>Start Date:</label><input id="host_country_date" type="text" />
<label>End Date:</label><input id="host_country_end_date" type="text" />

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。