Сбросить Выбрать меню по умолчанию в событии при изменении - PullRequest
Новая
       26

Сбросить Выбрать меню по умолчанию в событии при изменении

0 голосов
/ 08 января 2019

привет, я пытаюсь сбросить меню выбора до значения по умолчанию сразу после выбора нового элемента. Я никогда не хочу, чтобы меню выбора показывало выбранный элемент. У меня есть это меню выбора: 

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

Ни один из них не работает, и все они приводят к отображению выбранного элемента

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Если вы просто пытаетесь сбросить элемент выбора обратно к значению по умолчанию, есть несколько способов сделать это. Вот один способ, который будет работать:

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 в HTML подходит для начального рендеринга, но он исчезнет, ​​когда кто-то изменит значение (поэтому вы не можете полагаться на него во всем).

0 голосов
/ 08 января 2019

Добавьте это к вашему CSS 

option:checked {
  display:none;
}

Если вам нужно, чтобы это произошло только для определенного списка, измените селектор на #new-effect option:checked.

Теперь для вашего JS, сделайте это 

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

Если у вас есть более одного списка, вы захотите программно выбрать вариант по умолчанию, а не жестко кодировать его, как я сделал здесь.

...