Question

我正在开发一个基于CodeIgniter的新网站。我试图隐藏一些元素到我的表单取决于输入值，但该字段不会隐藏但保持禁用。

这是我的代码：

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>

这基本上给出了类似的东西：

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

我尝试在我的html中添加<input>字段，并将其隐藏在js中，并且效果很好。我不知道为什么，但似乎只有form_dropdown没有隐藏......

有人知道我做错了吗？

感谢。

Answer 1

我不知道你不工作的意思。但是你的代码可以更简单，没有if语句。

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

他们在这个小提琴中工作正常（他们隐藏而不是禁用） - 在Firefox / Chrome / IE9中测试

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

Answer 2

它适用于我this fiddle。

您发布的Javascript代码在DOM就绪处理程序之后缺少结束});。我假设输出是每个PHP <select>语句的echo元素。

Answer 3

您提到表单字段“保持禁用状态”。这是否意味着他们开始时是残疾人？禁用的表单元素不会捕获所有浏览器（Firefox）中的事件。

如果不是这样，你能提供一个jsfiddle吗？

Answer 4

<div class="clearfix">
    <div class="form-input">
        <select name="filter" id="form-timezone">
            <option value="city">City</option>
            <option value="country">Country</option>
        </select>
        <!-- Here a select foreach city and country -->
    </div>
</div>

了解城市和乡村没有身份证明？您无法在此处选择ID。

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

赢了工作。也许试试

var $firstOption= $(“#form-timezone option:first”)

jQuery输入没有隐藏

4 个答案: