Question

我正在使用MaterializeCSS创建一个选择“下拉”菜单。在Mac笔记本电脑上，该下拉列表运行正常（在Safari和FireFox以及通过browserling.com在IE和Chrome中进行了测试）。但是，当我从Windows计算机（IE和Chrome）浏览网站时，总是必须双击才能切换下拉菜单。我不明白为什么会发生这个问题。如果有人可以指出以下代码中的特定问题，我将不胜感激：

configFile.xml

请从MaterializeCSS here中找到文档。

Answer 1

这是Chrome 73中的回归错误。要解决此问题，请使用以下代码：（这是我唯一能找到的解决方案。）

$('select').material_select();
document.querySelectorAll('.select-wrapper').forEach(t => t.addEventListener('click', e=>e.stopPropagation()))

Answer 2

这是使用jQuery的一种方法

$('.select-dropdown').trigger("click");

我在实现选择时遇到了同样的问题，我在任何地方都找不到补丁。

理论上是，如果双击可以工作，则触发该实例的另一次点击。

这是我在应用程序中应用的上下文

我有一个选择下拉列表，如：

<div class="input-field ingredient-unit">
  <select name="" id="ingredient-unit">
     <option value="gr" selected>gr</option>
     <option value="kg" >kg</option>
     <option value="cups" >cups</option>
     <option value="ml" >ml</option>
     <option value="L" >L</option>
     <option value="tsp" >tsp</option>
     <option value="Tbsp" >Tbsp</option>
     <option value="pcs" >pcs</option>
 </select>
 <label for="ingredient-unit"></label>
</div>

要获取此选择的值，我有一个javascript函数，如：

$('.add-ingredient-button').click(function(){

    // due to a materialize css bug with chrome, take two clicks to activate the given selection
    // we hack this by triggering another click on the #ingredient-unit instance here
    $('.select-dropdown').trigger("click");

    //then we get the dropdown instance, everything else can be done with jQuery
    const ingredientUnit = M.FormSelect.getInstance($('#ingredient-unit'));


    // we need to grab information from all those boxes
    const name  = $('#ingredient-name').val();
    const value = $('#ingredient-value').val();
    const unit  = ingredientUnit.getSelectedValues();
    console.log(name,value,unit);
});

按下具有.add-ingredient-button类的按钮时，我们要获取成分名称，值和单位。该单元位于实现选择实例中。

因此，当我们单击.add-ingredient-button时会触发该功能，然后我们会“手动”触发select实例的另一次单击，从而有效地选择用户已经选择的单位。

我不确定为什么会发生此错误，并且我无法真正告诉您为什么会这样。但这有效。

希望对您有帮助！

Answer 3

答案是stopPropagation（）。但是重要的一点是，您必须等待组合的初始化。

vis[u] = 1

Materializecss选择双击以切换

3 个答案: