Question

I’m working on a new website based on CodeIgniter. I’m trying to hide some elements to my form depending on an input value, but the field doesn’t hide but stays disabled.

Here’s the code I have :

HTML :

<div class="clearfix">
    <label for="form-timezone" class="form-label">Filters<small>Options</small></label>
    <div class="form-input">
        <?php 
            echo form_dropdown('filter', $filters,'', 'id="form-timezone"');
            echo form_dropdown('city', $cities, '', 'id="city"');
            echo form_dropdown('country', $countries, '', 'id="country"');
        ?>
    </div>
</div>

Which basically gives something like :

<div class="clearfix">
    <div class="form-input">
        <select name="filter" id="form-timezone">
            <option value="city">City</option>
            <option value="country">Country</option>
        </select>
        <select name="cities" id="city">
            <option value="Paris">Paris</option>
            <option value="London">London</option>
        </select>
        <select name="countries" id="country">
            <option value="fr">France</option>
            <option value="en">England</option>
        </select>
    </div>
</div>

JS :

$(function() {

    $("#city").hide();
    $("#country").hide();

    $("#form-timezone").change(function() {
        if ( $("#form-timezone").val() == "city"){
            $("#city").show();
            $("#country").hide();
        }
        else if ( $("#form-timezone").val() == "country"){
            $("#city").hide();
            $("#country").show();
        }
    });
});

I tried to add an <input> field to my html, and to hide it in the js, and it worked well. I don’t know why, but it seems that only the form_dropdown doesn’t hide…

Do someone has an idea of what I’m doing wrong please ?

Thanks.

Answer 1

I don’t know what you mean by not working. But your code can be a lot simpler with no if statements.

$("#form-timezone").change(function() {
     var el =  $('#' + $(this).val()); // <-- store matched element
     el.show();  // <-- show matched element
    $("#country,#city").not(el).hide(); // <-- hide unmatched element
});

And they work fine in this fiddle (they hide and not disable) – tested in Firefox/Chrome/IE9

http://jsfiddle.net/5LNWr/1/