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

Javascript within a form to populate 6 fields with days of the week, based on an initial value set in a drop-down list

本文关键字：6个 填充 字段 一周 表单 包含 设置 下拉列表 Javascript      更新时间：2023-09-26

如果之前已经解决了这个问题，我很抱歉;我无法找到已经描述的解决方案。

我应该先说明我是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'

我需要一个五十分钟的休息时间，所以这里是我的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);
});
演示工作

一些代码片段:

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);
}
相关文章：