Question

在我的laravel 5.7 /刀片服务器/ jQuery v3.3.1 / Bootstrap v4.1.2应用程序中我使用了https://harvesthq.github.io/chosen/库（版本1.8.7），它可以工作，但是我发现了一个数据占位符的小错误我将选择输入定义为：

<select class="form-control editable_field chosen_select_box" id="chosen_customer_type" name="chosen_customer_type" onchange="javascript:chosenSelectionOnChange('customer_type'); " data-placeholder=" -Choose customer type- "  >
    <option value=""  selected ></option>
    <option value="SS" >SS</option
    ><option value="RS" >RS</option>
</select>↩

我必须使用空键和标签将第一个元素设置为元素，以使在没有为该选择输入选择任何值的情况下可见数据占位符。我在互联网上发现了这样的决定，如果没有这个空元素，数据占位符将不起作用。

但是用https://validator.w3.org进行测试时，我收到了下一个错误：错误：没有属性标签的元素选项不能为空。从线 199，第254栏；到第199行，选择第262列>

我想在https://validator.w3.org输出中修复此错误。

我使用JS代码初始化选择的输入：

$(".chosen_select_box").chosen({
    disable_search_threshold: 10,
    allow_single_deselect: true,
    no_results_text: "Nothing found!",
});

，这样选择的输入看起来像： https://imgur.com/a/GRXuyhk 对于顶部，未选择任何元素，第二个元素已选择元素，并且它具有取消选择图像，该图像由allow_single_deselect选项设置在上面的代码中。

是否有办法消除这些https://validator.w3.org错误？

谢谢！

Answer 1

这是我之前在评论中建议的简单摘要。

根据此代码段，如果我们预先向占位符'Central Europe Standard Time'添加了label属性，则selected生成的最终HTML标记足以通过W3C验证器，否则将失败：

<OPTION>

请注意，<select class="... chosen_select_box" data-placeholder=" -Choose customer type- "> <option value="" label=" -Choose customer type- " selected ></option> ... </select>元素上的data-attribute和select元素上的label属性被设置为相同的值，这不是必需的。 option将使用Chosen元素上的data-attribute作为占位符，而select上的label属性仅用于满足W3C验证。

option

$(".chosen_select_box").chosen({
    disable_search_threshold: 10,
    allow_single_deselect: true,
    no_results_text: "Nothing found!",
});

function chosenSelectionOnChange(type) {
  console.log(type);
}

select {
  width: 200px;
}

选择的select中的数据占位符引发validator.w3错误

1 个答案: