Значение в раскрывающемся списке 1 выбирает следующее значение в раскрывающемся списке 2

Question

Я создаю собственный плагин для локального каталога / информации / сообщества для WordPress. Одной из функций, которые я добавляю, является форма «Создать событие». Заголовок, хост, дата, время, местоположение и т. Д. Сейчас у меня есть даты начала, автоматически меняющие даты окончания на одинаковые. Таким образом, для MM-DD-YYY выпадающий список 1 (DD1) автоматически изменит выпадающий список 2 (DD2), поэтому они будут одинаковыми. (например, 1 марта 2019 года.) То, что я хочу сделать для времени начала и окончания (ЧЧ: ММ), это установить значение в DD2 равным следующему от DD1. (Например, время начала 07:00 через DD1; Время окончания DD2 автоматически устанавливается на 08:00.) Значение в DD1 должно быть DD1 + 1 в DD2 (например, DD1 равно 8; DD2 равно 9. DD1 равно 12; DD2 равно1. DD1 равен 2; DD2 равен 3.) Все это делается перед отправкой, так что это упрощает работу пользователя и ускоряет создание.

Мне помогла настройка двух разных выпадающих меню с одинаковыми значениями изздесь: Заполните второй раскрывающийся список тем же значением, что и первый раскрывающийся список

Я также сослался на Выберите следующий параметр с помощью jQuery для выбора следующего значения, но этовыбирает только следующее целое значение для каждого change. Я пробовал next(), trigger('change'), val(), и кто знает, что еще.

И я также посмотрел на многие другие вопросы SE и статьи Google, но все еще не нашелРешение я ищу. И, конечно же, мои знания jQuery / JavaScript чрезвычайно ограничены, поэтому я уверен, что это тоже не поможет.

HTML

<select name="dropdown" id="drop">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select name="some" id="two">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

jQuery

$('#drop').change(function() {
    var value = $('#drop option:selected').text();

    $("#two option:selected" ).text(value);
});

Вот мой JSFiddle, с которым я играл. http://jsfiddle.net/o5fzq74a/3/

Answer 1

Что вы делаете с этим сценарием - если вы выберете «3» в первом выборе, то это будет второй выбор:

<select name="some" id="two">
    <option value="1">3</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Вы измените текст первого варианта (значение1). Вы хотите это или хотите установить для атрибута «selected» значение 3?

Тогда вы должны:

$("#two").val(3).change();

И вы можете увеличить это «3» с помощью + 1

Редактировать:

Вот рабочий код:

$('#drop').change(function() {
    var value = parseInt($('#drop option:selected').text());

    $("#two").val(value + 1).change();

});

Ваш следующий проект: проверьте, если значение var равно 23, и установите его 0; -)

Редактировать 2: он работает "из коробки", когда последнее значение выбрано в первом выборе: http://jsfiddle.net/7t24jbvk/

С уважением Том