Question

您好，我正尝试在选择新项目后立即将选择菜单重置为默认选项。我从不希望选择菜单显示所选项目。我有这个选择菜单：

<select name="new-effect" id="new-effect">
    <option selected value="add">Add New Effect</option>
    <option value="waves">Waves</option>
    <option value="spiral">Spiral</option>
</select>

由

处理

$( function() {
    $( "#new-effect" ).selectmenu({
        change: function( event, data ){            
            add_new_effect(data.item.value);
        }
    });
});

它获取值，但是我无法重置它。我尝试了以下方法：

$("#new-effect").val("");
$("#new-effect").val("add");
$("#new-effect").prop('selectedIndex',0);

它们都不起作用，都导致显示选定的项目

Answer 1

如果您只是试图将select元素重置为默认值，则有几种方法可以实现。这是一种可行的方法：

https://jsfiddle.net/mswilson4040/gnLkyexa/5/

<select placeholder="Select a value..." id="new-effect">
  <option selected value="add" class="default-selection">Add New Effect</option>
  <option value="waves">Waves</option>
  <option value="spiral">Spiral</option>
</select>

const defaultOption = $('#new-effect').find('.default-selection');
$('#new-effect').change(e => {
  const value = $('#new-effect').val();
  console.log(value);
  $('#new-effect').val(defaultOption.val());
});

基本上，您需要捕获每次都要重置的默认值。一旦有了该值，就可以在更改事件中获取选定的值，并根据需要进行操作。完成之后，您可以将选择下拉列表重新设置为所需的值。

HTML中的selected属性可以很好地用于初始渲染，但是一旦有人更改了值，该属性就会消失（这就是为什么您不能完全依赖它的原因）。

Answer 2

将此添加到CSS

option:checked {
  display:none;
}

如果只需要针对特定列表执行此操作，则将选择器更改为#new-effect option:checked。

现在为您的JS做吧

$("#new-effect").change(function(e) {
  e.target.value = 'add';
});

如果您有多个列表，则需要以编程方式选择默认选项，而不是像我在此处那样对其进行硬编码。

将重置菜单重置为on change事件中的默认值

2 个答案: