如何从 HTML 中的选择标签中提取选定的值？答案

【问题标题】：How do I pull the selected values from a select tag in HTML?如何从 HTML 中的选择标签中提取选定的值？
【发布时间】：2020-01-10 16:23:55
【问题描述】：

我创建了一个 Django 模板，并尝试使用 JavaScript 从选项标签中获取选定的值。但是，虽然我当前的代码运行没有问题，但单击提交时没有响应。无论我选择什么选项，都不会加载另一个网页。任何人都可以帮助解释为什么会这样吗？

<!doctype html>
<h1>Searching for a particular tag?</h1>

<input type="text" id="target"/>
<select single="single" name="tag_options" id="tag_options">
    <option value="0">Hello</option>
    <option value="1">Goodbye</option>
</select>

<button type="submit" onclick="search()">Submit</button>
<br>
<a href="{% url 'frontpage' %}">Front Page</a>

<script>
    function search(){
        var values =  $('#tag_options').val();
        this.document.location.href = "http://127.0.0.1:8000/searchtableresults/"+values;

    }

</script>

此外，我最终希望将选项从静态选项更改为基于我从视图中加载的值的选项，就像这样

<!doctype html>
<h1>Searching for a particular tag?</h1>

<input type="text" id="target"/>
<select single="single" name="tag_options" id="tag_options">
    {% for possible_tag in possible_tags %}
    <option value="{{possible_tag}}">{{possible_tag}}</option>
    {% endfor %}
</select>

<button type="submit" onclick="search()">Submit</button>
<br>
<a href="{% url 'frontpage' %}">Front Page</a>

<script>
    function search(){
        var values =  $('#tag_options').val();
        this.document.location.href = "http://127.0.0.1:8000/searchtableresults/"+values;

    }

</script>

这行得通还是我需要尝试其他方法？

【问题讨论】：

submit 按钮是否在 <form> 元素中？
尝试使用 form 而不是这个 search() 函数来改变href。尝试更多地使用 jquery 来了解发生了什么。在控制台中点击$("#tag_options")，看看它会返回什么。

标签： javascript jquery html django

【解决方案1】：

我相信像这样使用 jquery 会起作用：

//Get select element
const tagSelect = document.querySelector('#tag_options');

//Access Options
let selectedTag = tagSelect.selectedOptions[0].getAttribute('value');

更改选项：

let tags = []

//Create
tags.forEach(tag => {
  const option = document.createElement('option');
  option.setAttribute('blah-blah', tag.whatever);
  tagSelect.appendChild(option);
})

希望这在某种程度上有所帮助...

【讨论】：