jQuery输入未隐藏

jQuery input not hidden

本文关键字：隐藏 输入 jQuery      更新时间：2024-05-21

我正在开发一个基于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没有隐藏。。。

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

谢谢。

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

这对我来说很管用。

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

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

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

<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”)
相关文章：