Question

基本上，我想创建超过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>

这只是一个下拉列表。假设我有3个具有不同默认值的相同数字的下拉列表，例如。 dp1 - ＆gt; 1，dp2 - ＆gt; 2，dp3 - ＆gt; 3。因此，现在，如果用户更改了dp3 to 1的值，则其他下拉列表的值应根据dp1 -> 2和dp2 -> 3等序列自动更改。

如果我用其他示例解释它，如果用户更改dp3 to 2的值，则值dp1 should not change和值dp2 -> 3应该更改。

如何使用Javascript / jquery。（我使用php填充数据库中的下拉列表）

提前谢谢。

Answer 1

如果你使用的数据真的只是数字，那么这样的东西就可以了。 Click here用于演示我认为您正在寻找的行为的jsfiddle示例。

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

Answer 2

如果您只想通过更改当前下拉列表来更改以前的下拉列表，则此示例代码可以为您提供帮助：

$("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);
      }
    });

HTML连接下拉列表（多个），数字为值

2 个答案: