Carlo Viloria Carlo Viloria - 1 year ago 82
HTML Question

Need to show two separate info on one select HTML/JS

I need to show these two array in two text field when selecting one option.
What is happening now is its just showing the first array, it needs to show two array on the input tags when creating country is selected.



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" />




Answer Source

You have to add the reference to the another array and include it in your code.

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" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download