Dropdown changing value when selected

Question

I have 5 cities (phil, germany, usa, china and russia) and this 5 cities are stored from database and I also have 5 dropdown having those 5 cities as there values.

What i want to happened is this, if the user select germany on dropdown 1, germany value on other dropdowns shouldn't exist anymore. Meaning, germany will be remove automatically on options of the other dropdown.

Can anyone know's how to make this possible on codeigniter?

At the moment i have this initial code http://screencast.com/t/eDTZFhjmon

Is there's a need to use jquery or javascript to make this happened? Thanks

Carl K · Answer 1 · 2015-07-02T01:44:15.370

I would recommend having all 5 of the dropdowns generated, and then disable all but the first. That way people must answer in order.

When the first is selected, run the code, and re-enable the next select and remove the appropriate option from all remaining.

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

I've added classes representing the value in each. Then, use jQuery to hide the selected answer as an option from the remaining selects:

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

Corrected to remove only from the remaining selects in the row — Carl K, Jul 02 '15 at 01:42

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Hi i think you are looking For .Please Follow Some Links :

Thanks

edited May 23 '17 at 12:22

Community

1
1

answered Jul 02 '15 at 01:33

Anand Dwivedi

1,452
13
23

score 0 · Answer 3 · answered Jul 02 '15 at 01:35

Here is a short example, using just 3 combo boxes. How you want to start will change the js, but this will hide any currently selected option from the other combo boxes.

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

I try this one but no luck. Can you please guide me how can i apply this correctly on codeigniter together with my initial code above. Thanks — Evilfear, Jul 02 '15 at 03:25

score -1 · Answer 4 · edited Jul 02 '15 at 03:32

Here is jQuery free solution.

Sample HTML which contains two dropdown with the value as germany, usa, china and russia.

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

Using jQuery to handle your requirement:

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

Dropdown changing value when selected

4 Answers4