在更改事件中将 Select 菜单重置为默认值

Question

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

<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);

None 他们的工作，他们都导致显示 selected 项目

Answer 1

将此添加到您的 CSS

option:checked {
  display:none;
}

如果您只需要对特定列表执行此操作，请将 selector 更改为 #new-effect option:checked。

现在为您的 JS，执行此操作

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

如果您有多个列表，您将希望以编程方式 select 默认选项，而不是像我在这里所做的那样对其进行硬编码。

Answer 2

如果您只是想将 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());
});

基本上，您需要每次都捕获要重置的默认值。一旦你有了它，在你的更改事件中，获取 selected 值并用它做你需要做的事情。完成后，您可以将 select 下拉菜单设置回您需要的值。

HTML 中的 selected 属性对于初始渲染来说很好，但是一旦有人更改了值，它就会消失（这就是为什么你不能依赖它的原因一切）。

在更改事件中将 Select 菜单重置为默认值

Reset Select Menu to default in the on change event

javascript

jquery

jquery-ui

select

jquery-ui-selectmenu