如何根据下拉菜单的城市与日期选择修改IMG标签的src属性？

需求说明 #

我有20个结构一致的IMG标签，需要添加功能：用户选择城市（dl为德里的城市编码）和日期后，所有图片的src属性根据用户输入修改。当前IMG标签示例如下：

<img src="https://www.example.com/2023/01/08/dl/01/image.jpg" alt="image"><br>
<img src="https://www.example.com/2023/01/08/dl/02/image.jpg" alt="image"><br>
<img src="https://www.example.com/2023/01/08/dl/03/image.jpg" alt="image"><br>
<img src="https://www.example.com/2023/01/08/dl/04/image.jpg" alt="image"><br>
<img src="https://www.example.com/2023/01/08/dl/05/image.jpg" alt="image"><br>

我已创建基础表单，要求默认城市为德里，默认日期为当前日期，表单初始代码如下：

<center><span>-: Select Your City :-</span><br>
<form action="" method="POST">
<select name="city">
<option value="">Select city...</option>
<option value="dl" selected>Delhi</option>
<option value="mb">Mumbai</option>
<option value="bl">Banglore</option>
<option value="hy">Hyderabad</option>
<option value="ch">Chennai</option>
<option value="ch">Kolkata</option>
</select>
<br><br>
<span>Select Date :-</span>
<br>
<input type="date" name="old" value="2023-01-08" min="2015-01-01" max="2023-01-08" required />
<br><br>
<input type="submit" value="Go" />
</form></center>

分步解决方案 #

1. 修正表单城市编码问题 #

原表单中Chennai和Kolkata的value均为ch，会导致选择这两个城市时无法区分，需修正Kolkata的编码（比如改为ko）：

<option value="ch">Chennai</option>
<option value="ko">Kolkata</option>

2. 设置默认日期为当前日期 #

通过JavaScript动态获取并设置当前日期为输入框默认值：

<input type="date" name="old" id="dateInput" min="2015-01-01" max="2023-01-08" required />
<script>
// 生成YYYY-MM-DD格式的当前日期
const today = new Date().toISOString().split('T')[0];
document.getElementById('dateInput').value = today;
</script>

3. 实现图片Src批量修改功能 #

提供两种实现方式，可根据场景选择：

方式一：前端无刷新修改

阻止表单默认提交行为，直接通过JavaScript修改图片地址：

<form id="imageFilterForm">
<!-- 这里放入修正后的表单内容 -->
</form>

<script>
const form = document.getElementById('imageFilterForm');
const images = document.querySelectorAll('img');

form.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止页面刷新
    
    const selectedCity = form.city.value;
    const selectedDate = form.old.value;
    
    if (!selectedCity) {
        alert('请选择城市');
        return;
    }
    
    // 将日期格式转为YYYY/MM/DD
    const formattedDate = selectedDate.replace(/-/g, '/');
    
    // 遍历所有图片更新src
    images.forEach((img, index) => {
        // 生成两位数字的图片序号（01、02...20）
        const imgNumber = (index + 1).toString().padStart(2, '0');
        img.src = `https://www.example.com/${formattedDate}/${selectedCity}/${imgNumber}/image.jpg`;
    });
});
</script>

方式二：后端动态生成（以PHP为例）

通过后端接收表单参数，动态渲染图片标签：

<?php
// 获取提交的城市与日期，默认值设为德里和当前日期
$selectedCity = $_POST['city'] ?? 'dl';
$selectedDate = $_POST['old'] ?? date('Y-m-d');
// 转换日期格式为YYYY/MM/DD
$formattedDate = str_replace('-', '/', $selectedDate);
?>

<!-- 动态生成20张图片 -->
<?php for ($i = 1; $i <= 20; $i++) : ?>
    <?php $imgNumber = str_pad($i, 2, '0', STR_PAD_LEFT); ?>
    <img src="https://www.example.com/<?php echo $formattedDate; ?>/<?php echo $selectedCity; ?>/<?php echo $imgNumber; ?>/image.jpg" alt="image"><br>
<?php endfor; ?>

<!-- 渲染带默认值的表单 -->
<center><span>-: Select Your City :-</span><br>
<form action="" method="POST">
<select name="city">
<option value="">Select city...</option>
<option value="dl" <?php echo $selectedCity === 'dl' ? 'selected' : ''; ?>>Delhi</option>
<option value="mb" <?php echo $selectedCity === 'mb' ? 'selected' : ''; ?>>Mumbai</option>
<option value="bl" <?php echo $selectedCity === 'bl' ? 'selected' : ''; ?>>Banglore</option>
<option value="hy" <?php echo $selectedCity === 'hy' ? 'selected' : ''; ?>>Hyderabad</option>
<option value="ch" <?php echo $selectedCity === 'ch' ? 'selected' : ''; ?>>Chennai</option>
<option value="ko" <?php echo $selectedCity === 'ko' ? 'selected' : ''; ?>>Kolkata</option>
</select>
<br><br>
<span>Select Date :-</span>
<br>
<input type="date" name="old" value="<?php echo $selectedDate; ?>" min="2015-01-01" max="2023-01-08" required />
<br><br>
<input type="submit" value="Go" />
</form></center>

内容的提问来源于stack exchange，提问作者Dhiraz Singh