Question

我对JavaScript很陌生，而且我已经在下面的这个下拉菜单中徘徊。

<form id="bootstrapSelectForm" method="post" class="form-horizontal">
        <div class="form-group">
        <label class="col-xs-3 control-label">Time period</label>
        <div class="col-xs-5 selectContainer">
            <select name="time" class="form-control">
                <option value="all">All</option>
                <option value="1month">1 month</option>
                <option value="2months">2 months</option>
                <option value="3months">3 months</option>
                <option value="6months">6 months</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Ok</button>
    </div>
</form>

<script type="text/javascript">
    function submitClick() {
        // Somehow fetch data from dropdown
    }
</script>

我想要做的是在点击＆＃34;提交＆＃34;时，在下拉列表中检索所选项目的名称/值。按钮，然后使用该值执行某些操作。但我在这里开始时有点迷失，任何提示或帮助都非常感激。

Answer 1

将向您的表单提交函数传递一个事件，该事件将包含该事件的数组属性中表单的所有字段。您可以通过console.log(event)查看该事件，以了解这些属性的内容。在您的情况下，select字段实际上将是事件的属性数组中的第一个元素，因为它是第一个表单元素。

所以你想要更像这样的东西：

<script type="text/javascript">
    function submitClick(event) {
        //prevent the page from posting when you submit the form
        event.preventDefault();

        //print the value of the select field
        console.log(event[0]);
    }
</script>

要记住的另一件事是，您必须向表单添加一个事件侦听器才能触发此函数。因此，在代码中的某处，您将需要以下内容：

document.getElementById("bootstrapSelectForm").addEventListener("submit", submitClick);

Answer 2

看看这个：Get selected value in dropdown list using JavaScript? 我建议你看一下jQuery，因为它更容易理解。例如，获取下拉值可以在一行简单的代码中完成。像这样： $('#id_of_select_tag').find('option:selected').val();

Bootstrap下拉获取值

2 个答案: