javascript - 我如何在单个选择上存储两个信息并在单独的文本框 HTML/JS 中调用它们

Question

<span id="s_home_country">                   
    <select name="Home Country" id="home_country">
        <option value="Select one" selected="selected">Select one</option>
        <option value="h1">Home1</option>
        <option value="h2">Home2</option>
        <option value="h3">Home3</option>
        <option value="h4">Home4</option>
    </select>
</span>

and I have another data that i want to incorporate, when Home1 is selected, I want this to show 21-dec into another textbox automatically.等等..

var Home_country = [
    "21-Dec",
    "01-Jan",
    "01-Jan",
    "01-Jan",
];

Answer 1

您可以使用一个对象和一个事件监听器。

var home_country = {
    "h1":"21-Dec",
    "h2":"01-Jan",
    "h3":"01-Jan",
    "h4":"01-Jan",
};

var selectbox = document.getElementById('home_country');
var textbox = document.getElementById('home_country_date');

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

<span id="s_home_country">                   
    <select name="Home Country" id="home_country">
        <option value="Select one" selected="selected">Select one</option>
        <option value="h1">Home1</option>
        <option value="h2">Home2</option>
        <option value="h3">Home3</option>
        <option value="h4">Home4</option>
    </select>
</span>

<input type="text" id="home_country_date">