Question

我有5个城市（菲尔，德国，美国，中国和俄罗斯），这5个城市都是从数据库中存储的，我还有5个下拉列表，其中有5个城市作为值。

我想要发生的是，如果用户在下拉列表1中选择德国，其他下拉列表上的德国值将不再存在。意思是，德国将自动删除其他下拉列表的选项。

有谁知道如何在codeigniter上实现这一点？

目前我有这个初始代码http://screencast.com/t/eDTZFhjmon

是否需要使用jquery或javascript来实现这一目标？感谢

Answer 1

我建议生成所有5个下拉列表，然后禁用除第一个以外的所有下拉列表。这样人们就必须以顺序回答。

选择第一个时，运行代码，然后重新启用下一个选择并从剩余的所有选项中删除相应的选项。

<select id="dropone" class="countries">
    <option class=".germany">Germany</germany>
    <option class=".phil">Phil</germany>
    <option class=".usa">USA</germany> 
    <option class=".China">China</germany>
    <option class=".russia">Russia</germany>
</select>

我已经添加了代表每个类中的值的类。然后，使用jQuery从剩余中选择隐藏所选答案作为选项：

$('.countries').change(function () {
    var val = $(this).find('option:selected').attr('class');
    $('.countries:gt('+$(this).index()+')').find('option.'+val).hide();
});

Answer 2

您好我认为您正在寻找。请关注一些链接：

谢谢

Answer 3

这是一个简短的例子，仅使用3个组合框。你想如何开始将改变js，但这将隐藏其他组合框中当前选择的任何选项。

＆＃13;

//hide original
$('select').each(function(){
  var city=$(this).val();
  var cur=$(this).attr('name');
  $('select option[name!='+cur+'][value='+city+']').hide();
});
//when change, hide others
$('select').on('change',function(){
  $('select option').show();
  $('select').each(function(){
    var city=$(this).val();
    var cur=$(this).attr('name');
    $('select option[name!='+cur+'][value='+city+']').hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='left half' style='margin-right:10px'>
  <label><strong><span style='color:#F00'>*</span>City Order 1</strong></label>
  <select name='city_order_1' class='select-block mbl cityorder' required>
    <option value='phil' selected>phil</option>
    <option value='china'>china</option>
    <option value='germany'>germany</option>
    <option value='usa'>usa</option>
    <option value='russia'>russia</option>
    </select>
</div>
<div class='left half' style='margin-right:10px'>
  <label><strong><span style='color:#F00'>*</span>City Order 2</strong></label>
  <select name='city_order_2' class='select-block mbl cityorder' required>
    <option value='phil'>phil</option>
    <option value='china' selected>china</option>
    <option value='germany'>germany</option>
    <option value='usa'>usa</option>
    <option value='russia'>russia</option>
    </select>
</div>
<div class='left half' style='margin-right:10px'>
  <label><strong><span style='color:#F00'>*</span>City Order 3</strong></label>
  <select name='city_order_3' class='select-block mbl cityorder' required>
    <option value='phil'>phil</option>
    <option value='china'>china</option>
    <option value='germany' selected>germany</option>
    <option value='usa'>usa</option>
    <option value='russia'>russia</option>
    </select>
</div>

＆＃13;

Answer 4

这是jQuery免费解决方案。

示例HTML，其中包含两个下拉列表，其值为德国，美国，中国和俄罗斯。

<select id="cities0" onchange="upDateValue(this)">
    <option value='china'>China</option>
    <option value='germany' selected>Germany</option>
    <option value='usa'>USA</option>
    <option value='russia'>Russia</option>
</select>
<select id="cities1" onchange="upDateValue(this)">
    <option value='china'>China</option>
    <option value='germany' selected>Germany</option>
    <option value='usa'>USA</option>
    <option value='russia'>Russia</option>
</select>

使用jQuery来处理您的要求：

function upDateValue(v)
{
    var value=v.options[v.selectedIndex].value
    var temp,thisId=v.id;
    for (i=0;i<2;i++)
    {
        temp="cities"+i;
        if (temp!=thisId)
        {
            updateDropDownBox(temp,value);
        }
    }
}

function updateDropDownBox(id,value)
{
    var dropDownBox=document.getElementById(id);
    for (i=0;i<dropDownBox.options.length;i++)
    {
        if (value==dropDownBox.options[i].value)
        {
             dropDownBox.options[i].remove();
        }
    }
}

Demo

选中时下拉列表更改值

4 个答案: