如何使用JS下拉日期自动填充文本区域

Question

如何使用所选日期自动填写下面的文本字段？让它自动填充。

<td width = "370" class = "style22">
    <input name = "date" type = "text" id = "date" value = "<?php echo $current_date ?>" size="20">
    <select id = "daydropdown"> </select>
    <select id = "monthdropdown"> </select>
    <select id = "yeardropdown"> </select>                    
    <script type = "text/javascript">

        // populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
        window.onload = function(){ 
            populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
        }
    </script>
</td>

Answer 1

查看selectedIndex HTML元素的<select> ... </select>属性。您可以使用它来访问当前选择的选项。

<script type="text/javascript">

function showDate(){
    // Get all <select>'s to array.
    // You may change their positions in array, if needed.
    var combos = [
        document.getElementById('daydropdown'),
        document.getElementById('monthdropdown'),
        document.getElementById('yeardropdown')
    ];

    var values = [], combo, value;

    for(var i = 0; i < combos.length; i++){
        // current <select> element:
        combo = combos[i];

        // value of selected <option> for current <select>:
        value = combo.options[combo.selectedIndex].innerHTML;

        // push value to buffer
        values.push(value);
    }

    // assignment of <input>'s value:
    document.getElementById('date').value = values.join(' ');
}

// event handlers:
document.getElementById('daydropdown').onchange =
   document.getElementById('monthdropdown').onchange =
       document.getElementById('yeardropdown').onchange = showDate;
</script>