繁体   English   中英

jQuery-使用select标签显示和隐藏DIV

[英]jquery - show and hide DIV with the select tag

<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this );">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
    <option value="Africa">Africa</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
    <option value="0">Select a country</option>
</select>
<div id="soc-pri">
    <label for="company">Company</label>
    <input name="customer" type="radio" value="company" />
    <label for="private">Private</label>
    <input name="customer" type="radio" value="private" />
</div>
<div id="lib-ass">
    <label for="individual firm / freelancer">Individual Firm / Freelancer Professionista</label>
    <input name="customer" type="radio" value="privato" />
    <label for="association">Associazione</label>
    <input name="customer" type="radio" value="association" />
</div>




$(document).ready(function () {
    $("select").change(function () {
        if ($("select option:selected").val() == "Europe") {
            $('#lib-ass').show();
            $('#soc-pri').show();

        } else if ($("select option:selected").val() != "Europe") {
            $('#lib-ass').hide();
        }
    }).change();
});

大家好,我刚刚开始学习jquery。 我有两个选择字段,分别包含各大洲和国家。

我的需求nascodere显示两个DIV,即“ lib-ass”和“ soc-first”:

1)当您选择欧洲大陆时,将显示DIV“ lib-ass”。 那没问题

2)当您未选择欧洲大陆DIV“ lib-ass”时,将隐藏。 那没问题

3如果您未选择国家DIV英国,则必须隐藏“ lib-ass”。 这不行

当您选择国家DIV英国时,您必须显示“ lib-ass”。 这样不好

我的问题是,当您选择国家ID为“ lib-ass”的英国DIV标签时,我无法隐藏显示。

我哪里错了?

我希望尽可能多地提供信息。 谢谢

http://jsfiddle.net/carmy/jg7Ls/6/

http://jsfiddle.net/J2XDk/1/这是您要执行的操作吗?

我做了一些更改:可以通过直接在select上调用.val()来检索select值(无需查找所选选项)。 我也专门使用选择框ID来查找它,因为仅执行$('select')是模棱两可的。 将值保存到变量,这样您就不必多次执行jQuery。 欧洲支票的替代条件可以使用其他条件,无需专门检查!= "Europe"

$(document).ready(function () {

    $("select").change(function () {
        var continent = $('#continent').val(),
            country = $('#country').val(),
            $libass = $('#lib-ass'),
            $socpri = $('#soc-pri');

        if (continent === "Europe") {
            $libass.show();
            $socpri.show();

        } else {
            $libass.hide();
        }

        if(country === 'Britain') {
            $libass.hide();                
        } else {
            $libass.show();   
        }

    }).change();
});

您可以在逻辑中添加以下内容:

$("#country").change(function(){
            if($("#country option:selected").val() == "Britain") {
                $('#lib-ass').show(); 
                $('#soc-pri').show();
            }else{
                $('#lib-ass').hide();
            }
 }).change();

国家/地区是您所选国家/地区的选择框。 井号(#)用于调用Jquery中的特定ID。

这是一个有效的例子

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM