Javascript 以数字作为值的HTML连接下拉列表（多个）

基本上，我想创建多于1的下拉列表，其中包含数字作为值，例如

<select id="dp1">
<option value='op1'>1</option>
<option value='op2'>2</option>
<option value='op3'>3</option>
</select>

<select id="dp2">
<option value='op1'>1</option>
<option value='op2'>2</option>
<option value='op3'>3</option>
</select>

<select id="dp3">
<option value='op1'>1</option>
<option value='op2'>2</option>
<option value='op3'>3</option>
</select>

1.
2.
3.
1.
2.
3.
1.
2.
3.

这只是一个下拉列表。假设我有3个下拉列表，其中的数字相同，默认值不同，例如dp1->1、dp2->2、dp3->3。因此，现在如果用户将

dp3的值更改为1

，则其他下拉列表的值应按照

dp1->2

和

dp2->3

等顺序自动更改

如果我用其他示例解释，如果用户将

dp3的值更改为2，则
dp1的值不应更改
，而
dp2->3的值应更改

如何使用Javascript/jquery实现这一点。（我正在使用php填充数据库中的下拉列表）

提前谢谢。
如果您使用的数据实际上只是数字，那么类似的方法就可以了。下面是一个JSFIDLE示例，它演示了我认为您需要的行为

<select id="dp1" class="dropdown"></select>
<select id="dp2" class="dropdown"></select>
<select id="dp3" class="dropdown"></select>

<script type="text/javascript">                     
var values = [1, 2, 3];

$(function() {
  initDropdowns();

  $('select.dropdown').change(function() {
    setDropdownValues($(this).attr('id'));                  
  });
}); 

function initDropdowns() {
  var optionsHtml = '';

  for(var i = 0; i < values.length; i++) {              
    var value = values[i];
    optionsHtml += '<option value="' + value + '">' + value + '</option>';
  }

  $('select.dropdown').append(optionsHtml);
    setDropdownValues();                
}

function setDropdownValues(excludeListId) {
  var valuesClone = values.slice();
  var $dropdowns = $('select.dropdown');

  if(excludeListId) {
    valuesClone.splice(Number($('#' + excludeListId).val()) - 1, 1);
  }             

  $('select.dropdown').each(function() {
    if($(this).attr('id') !== excludeListId) {
      $(this).val(valuesClone[0]);
      valuesClone.splice(0, 1);
    }                   
  });   
}
</script>   


var值=[1,2,3]；
$（函数（）{
初始化下拉列表（）；
$（'select.dropdown'）.change（函数（）{
setDropDownValue（$（this.attr（'id'））；
});
}); 
函数initDropdowns（）{
var optionsHtml=''；
对于（var i=0；i
如果您只想更改以前的下拉列表，请购买更改当前的下拉列表，也许此示例代码可以帮助您：

$("select").change(function(){
    var selectValue = $(this).val();
    var toRemove = 'op';
    var value  = selectValue.replace(toRemove,'');
    var selectId = $(this).attr('id');
    var toRemove = 'dp';
    var id = selectId.replace(toRemove,'');
    id = id-1;
    for(var i = id; i>=1; i--){
         value = value -1;
         var newValue = "op"+value;
         $("#dp"+i).val(newValue);
      }
    });

诸如此类？DropDownList变化背后的逻辑是什么？它们之间有什么关系？