Question

<a class="btn btn-info btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="shopcollection" 
value="" required="required"/>

<span class="btn-select-value">Select Shop</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down' 
required="required"></span>

<ul>
    <li>example1</li>
    <li>example2</li>
    <li>example3</li>
</ul>
</a>

$(document).ready(function () {
$(".btn-select").each(function (e) {
    var value = $(this).find("ul li.selected").html();
    if (value != undefined) {
        $(this).find(".btn-select-input").val(value);
        $(this).find(".btn-select-value").html(value);
    }
});
});

$(document).on('click', '.btn-select', function (e) {
    e.preventDefault();
    var ul = $(this).find("ul");
    if ($(this).hasClass("active")) {
       if (ul.find("li").is(e.target)) {
        var target = $(e.target);
        target.addClass("selected").siblings().removeClass("selected");
        var value = target.html();
        $(this).find(".btn-select-input").val(value);
        $(this).find(".btn-select-value").html(value);
    }
    ul.hide();
    $(this).removeClass("active");
}
else {
    $('.btn-select').not(this).each(function () {
        $(this).removeClass("active").find("ul").hide();
    });
    ul.slideDown(300);
    $(this).addClass("active");
}
});

$(document).on('click', function (e) {
var target = $(e.target).closest(".btn-select");
if (!target.length) {
    $(".btn-select").removeClass("active").find("ul").hide();
}
});

我正在努力使用户必须选择其中一个元素（example1），但是我的所需代码不起作用，因此用户可以绕过下拉列表。我已经包含下拉代码（顶部）和下拉javascript文件（底部），任何提示？

Answer 1

您需要使用select来满足您的需求：

<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

进一步阅读：https://www.w3schools.com/tags/att_select_required.asp

如何为下拉列表创建span类？

1 个答案: