Django中通过<select><option>跳转至DetailView视图的实现问题

即时跳转方案（优先推荐） #

要实现选择章节后立即跳转，需要借助JavaScript监听下拉框的变化事件——<option>标签内无法嵌套<a>标签，这就是你之前尝试无效的原因。

步骤1：修正HTML模板 #

调整下拉框代码，确保当前章节被正确选中，同时给下拉框添加ID方便JS获取：

<select id="chapter-select" class="form-select" aria-label="章节选择">
    {% for capitulo in chapter_group %}
    <option value="{% url 'chapter_view' novel.id capitulo.pk %}" 
            {% if capitulo.pk == chapter.pk %}selected{% endif %}>
        {{ capitulo.chapter_number }} - {{ capitulo.chapter_title }}
    </option>
    {% endfor %}
</select>

说明：通过{% if capitulo.pk == chapter.pk %}判断当前章节，自动选中对应选项，避免固定显示第一个选项的问题。

步骤2：添加JavaScript监听事件 #

在模板底部（或引入的JS文件中）添加以下代码，监听下拉框的change事件触发页面跳转：

const chapterSelect = document.getElementById('chapter-select');
chapterSelect.addEventListener('change', function() {
    const targetUrl = this.value;
    if (targetUrl) {
        window.location.href = targetUrl;
    }
});

按钮跳转方案（备选） #

如果需要保留按钮触发跳转的逻辑，可给表单添加按钮并通过JS实现点击跳转：

<form id="chapter-form">
    <select id="chapter-select" class="form-select" aria-label="章节选择">
        {% for capitulo in chapter_group %}
        <option value="{% url 'chapter_view' novel.id capitulo.pk %}" 
                {% if capitulo.pk == chapter.pk %}selected{% endif %}>
            {{ capitulo.chapter_number }} - {{ capitulo.chapter_title }}
        </option>
        {% endfor %}
    </select>
    <button type="button" class="btn btn-primary mt-2" id="jump-btn">跳转</button>
</form>

<script>
const jumpBtn = document.getElementById('jump-btn');
const chapterSelect = document.getElementById('chapter-select');

jumpBtn.addEventListener('click', function() {
    const targetUrl = chapterSelect.value;
    if (targetUrl) {
        window.location.href = targetUrl;
    }
});
</script>

修正后端代码的小问题 #

你的ChapterView中获取novel的代码存在逻辑错误：

# 原错误代码
context['novel'] = Novel.objects.get(novel_title=self.get_object().chapter_novel)

chapter_novel是外键字段，直接指向Novel对象，无需通过novel_title查询，改成：

context['novel'] = self.get_object().chapter_novel

补充说明 #

• 跳转逻辑和后端是否使用类视图（as_view()）无关，类视图仅负责处理请求返回页面，跳转是前端通过JS完成的行为。
• 你的similar_chapter方法已正确返回当前小说的所有章节，无需修改。

内容的提问来源于stack exchange，提问作者Caio Fernandes