javascript - 基于下拉列表中设置的初始值，表单中的 Javascript 用一周中的天数填充 6 个字段

Question

如果之前已解决此问题，我深表歉意；我无法找到已经描述的解决方案。

我应该先提出我的问题，说我是 JS 编码的新手。

我正在尝试在表单中设置 JavaScript，以根据下拉列表中设置的初始值填充一周中的 6 个字段。

伪代码：

Field 0 Drop-down list value selected by user is 'Tuesday'
Field 1 populates to 'Wednesday'
Field 2 populates to 'Thursday'
Field 3 populates to 'Friday'
Field 4 populates to 'Saturday'
Field 5 populates to 'Sunday'
Field 6 populates to 'Monday'

Answer 1

我需要休息十分钟，所以这是我的 jQuery 解决方案（假设你愿意使用它）：

HTML

<select id="day0"></select><br />
<input id="day1" type="text" /><br />
<input id="day2" type="text" /><br />
<input id="day3" type="text" /><br />
<input id="day4" type="text" /><br />
<input id="day5" type="text" /><br />
<input id="day6" type="text" /><br />

JS：

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

function update(sel) {
    var start = parseInt($(sel).val());
    for (var i = 1; i <= days.length; i++) {
        $('#day' + i).val(days[(i + start) % 7]);                            
    }   
}

$(function() {
    // Find the select list
    var $sel = $('#day0');
    // Populate it with values from the 'days' array
    $.each(days, function(i, v) {
        $('<option value="' + i + '">' + v + '</option>').appendTo($sel);
    });
    // Hook up the 'update' function to run every time the
    // selected option is changed
    $sel.change(function() { 
        update(this);
    });
    // Force an initial update of the fields
    update($sel);
});

工作演示

Answer 2

Some snippet:

HTML

<select id="dropdown"></select>

Javascript

var days = {
    v0 : 'Tuesday',
    v1 : 'Wednesday',
    v2 : 'Thursday',
    v3 : 'Friday',
    v4 : 'Saturday',
    v5 : 'Sunday',
    v6 : 'Monday'
};

var dropdown = document.getElementById("dropdown");
for(index in days) {
    dropdown.options[dropdown.options.length] = new Option(days[index], index);
}