下拉菜单1中的值选择下拉菜单2中的下一个值

2024-05-07 • 问答

我正在为WordPress构建自定义的本地目录/信息/社区插件。我要添加的功能之一是“创建事件”表单。标题，主持人，日期，时间，位置等。现在，我将开始日期自动更改为相同的结束日期。因此，对于MM-DD-YYY，下拉菜单1（DD1）会自动更改下拉菜单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/

此脚本的作用是-如果在第一个选择中选择“ 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/

关于汤姆

下拉菜单1中的值选择下拉菜单2中的下一个值

climb166 回答：下拉菜单1中的值选择下拉菜单2中的下一个值

大家都在问