2015-07-02 2 views
0

У меня есть 5 городов (фил, германия, США, Китай и Россия), и эти 5 городов хранятся из базы данных, и у меня также есть 5 выпадающих списков с теми 5 городами, где есть значения.Выпадающее изменение значения, если выбрано

Что я хочу, чтобы это произошло, если пользователь выбрал германию в раскрывающемся списке 1, значение германии в других выпадающих списках больше не должно существовать. Значение, германия будет автоматически удаляться по опциям другого выпадающего списка.

Может ли кто-нибудь знать, как сделать это возможным на codeigniter?

На данный момент у меня есть этот исходный код http://screencast.com/t/eDTZFhjmon

ли есть необходимость использовать JQuery или JavaScript, чтобы это произошло? Спасибо

ответ

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(); 
}); 
+0

Исправленная удалить только из оставшихся выбирает в строке –

0

Вот краткий пример, используя только 3 комбинированные коробки. Как вы хотите начать, измените js, но это скроет любой выбранный в данный момент параметр из других комбинированных полей.

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

+0

я попробовать это, но не повезло. Не могли бы вы посоветовать мне, как я могу применить это правильно на codeigniter вместе с моим предыдущим кодом выше. благодаря – Evilfear

-1

Вот 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

Смежные вопросы