0

基本上，我想创建超过 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 -> 1, dp2 -> 2, dp3 -> 3 。因此，现在如果用户更改dp3 to 1其他下拉列表的值的值，应该按照顺序自动更改，例如dp1 -> 2和dp2 -> 3。

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

怎么可能使用 Javascript / jquery。（我正在使用 php 从数据库中填充下拉列表）

先感谢您。

4

2 回答 2

0

如果您使用的数据真的只是数字，那么这样的事情就可以了。单击此处查看 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>
于 2013-01-21T19:35:42.740 回答
0

如果您只想更改以前的下拉列表，请购买更改当前下拉列表，也许此示例代码可以帮助您： 

$("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);
      }
    });
于 2013-01-21T19:39:03.270 回答