Javascript 如何从HTML中的select标记中提取所选值？_Javascript_Jquery_Html_Django

Javascript 如何从HTML中的select标记中提取所选值？

javascript jquery html django

Javascript 如何从HTML中的select标记中提取所选值？,javascript,jquery,html,django,Javascript,Jquery,Html,Django,我已经创建了一个Django模板，并试图使用JavaScript从选项标记中获取所选值。但是，虽然我当前的代码运行时没有问题，但单击submit时没有响应。无论我选择什么选项，其他网页都不会加载。有人能解释为什么会发生这种情况吗 <!doctype html> <h1>Searching for a particular tag?</h1> <input type="text" id="target"/> <select single="s

我已经创建了一个Django模板，并试图使用JavaScript从选项标记中获取所选值。但是，虽然我当前的代码运行时没有问题，但单击submit时没有响应。无论我选择什么选项，其他网页都不会加载。有人能解释为什么会发生这种情况吗

<!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>

这是可行的还是我需要尝试其他方法？

我相信使用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);
})

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

我相信使用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);
})

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

提交按钮是否在元素中？尝试使用表单，而不是通过更改href来使用此搜索功能。尝试更多地使用jquery来了解发生了什么。点击控制台中的$tag_选项，观察它将返回什么。提交按钮是否在元素中？尝试使用表单，而不是带有更改href的搜索功能。尝试更多地使用jquery来了解发生了什么。点击控制台中的$tag_选项，观察它将返回什么。