0

我正在开发一个基于 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();
        }
    });
});

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

请问有人知道我做错了什么吗？

谢谢。

4

4 回答 4

0

不知道你说的不工作是什么意思。但是如果没有 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/

于 2012-07-31T15:33:49.297 回答
0

它在这个小提琴中对我有用。

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

于 2012-07-31T15:38:16.803 回答
0

您提到表单字段“保持禁用状态”。这是否意味着他们一开始就被禁用了？禁用的表单元素不会在所有浏览器 (Firefox) 中捕获事件。

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

于 2012-07-31T15:39:35.157 回答
0 
<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？您不能在此处选择 ID。

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

不会工作。也许试试

var $firstOption= $(“#form-timezone option:first”)
于 2012-07-31T15:50:06.333 回答