下拉列表 1 中的值选择下拉列表 2 中的下一个值

Question

我正在为 WordPress 构建一个自定义的本地目录/信息/社区插件。我要添加的功能之一是“创建活动”表单。标题、主持人、日期、时间、地点等。现在，我让开始日期自动将结束日期更改为相同。因此对于 MM-DD-YYY，Dropdown 1(DD1) 将自动更改 Dropdown 2(DD2)，因此它们是相同的。 （例如 2019 年 3 月 1 日。）我想要对开始和结束时间 (HH:MM) 执行的操作是将 DD2 中的值设置为 DD1 中的下一个值。 （例如 DD1 的开始时间为 07:00；DD2 的结束时间自动设置为 08:00。） DD1 中的值需要在 DD2 中为 DD1+1（例如 DD1 为 8；DD2 为 9。DD1 为 12；DD2 为1. DD1 是 2；DD2 是 3。）这一切都是在提交之前完成的，因此它是一种简单的用户体验，并且可以更快地创建。

我从这里获得了设置两个具有相同值的不同下拉列表的帮助：Fill second dropdown with the same value as the first dropdown

我还参考了Select next option with 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）。您想要这个还是要将“选定”属性设置为值 3？

那么你应该：

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

你可以用 +1 增加这个“3”

编辑：

这是一个工作代码：

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

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

});

您的下一个项目是：检查 var 值是否为 23 并将其设置为 0 ;-)

编辑 2： 当在第一次选择中选择最后一个值时，它“开箱即用”： http://jsfiddle.net/7t24jbvk/

问候汤姆