Question

我遇到了一个问题。引导程序4中的下拉菜单使用带有锚点的按钮样式下拉菜单。下拉功能工作正常，但是当我实际提交表单时，我没有从下拉列表中获取值。除了名称，我是否需要提供特殊的属性？我在expressjs的请求正文中看不到这些值。

<div class="form-group">
    <div class="col-5">
        <label for="sec_questions">
            Security Questions <span class="error_required">*</span>
        </label>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" 
              id="sec_questions" name="sec_questions" value="this" 
              role="dropdown" data-toggle="dropdown" 
              aria-haspopup="true" aria-expanded="false">
                Please Select
            </button>
            <div class="dropdown-menu" aria-labelledby="sec_questions">
                <a class="dropdown-item" href="#">
                    What is your mother's maiden name?
                </a>
                <a class="dropdown-item" href="#">
                    What is your pet's name?
                </a>
                <a class="dropdown-item" href="#">
                    What street did you grow up on?
                </a>
                <a class="dropdown-item" href="#">
                    Where did you go in elementary school?
                </a>
                <a class="dropdown-item" href="#">
                    Who was your first employer?
                </a>
            </div>
        </div>
    </div>
</div>

req主体中存在其他字段，但下拉列表很奇怪。

Answer 1

bootstrap4下拉菜单用于样式。这不是HTML表单元素。除非您使用javascript来获取所有输入值并使用AJAX将它们作为一个整体提交，否则它将不会自动绑定到您的表单。

要将绑定的数据绑定到表单提交中，请改用<select />。

<div class="form-group">
    <select class="form-control" name="sec_questions">
        <option>Please Select</option>
        <option>What is your mother's maiden name?</option>
        <option>What is your pet's name?</option>
        <option>What street did you grow up on?</option>
        <option>Where did you go in elementary school?</option>
        <option>Who was your first employer?</option>
    </select>
</div>

演示： http://jsfiddle.net/davidliang2008/aq9Laaew/290563/

别忘了表单元素上的name属性！

如何从bootstrap 4下拉列表中获取发布数据

1 个答案: