文章/答案/技术大牛

发布

社区首页 >问答首页 >嵌套div显示和隐藏下拉值选择

问嵌套div显示和隐藏下拉值选择
EN

Stack Overflow用户

提问于 2014-12-19 15:37:04

回答 4查看 1.3K关注 0票数 0

我试图在其他领域的基础上打开下拉列表和其他字段。我试图为客户创建一个表格，以满足他们的具体要求。

DIV将根据使用jquery选择的下拉列表隐藏和显示。

下面是我的html代码的样子。

<div class="website-type">
                <label class=""><b>Website Type</b>
                    <select>
                        <option>--------Select--------</option>
                        <option value="static-website">Static Website</option>
                        <option value="dynamic-website">Dynamic Website</option>
                        <option value="ecommerce-website">eCommerce Website</option>
                        <option value="seo">Search Engine Optimization</option>
                        <option value="graphic-design">Graphic Design</option>
                    </select>
                </label>
            </div>


            <div class="static-website" id="static-website">

                    <label class=""><b>Design Level</b>
                        <select>
                                <option>--------Select--------</option>
                                <option value="basic-design">Basic Design</option>
                                <option value="business-design">Business Design</option>
                                <option value="creative-design">Creative Design</option>
                        </select>
                    </label>
                     <br/>



                <div class="static-website-basic">

                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Basic Static Box -->



                 <div class="static-website-business">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="10" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="10" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of BUSINESS Static Box -->



                 <div class="static-website-creative">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Creative Static Box -->


            </div> <!-- End of Static Box -->

这只是我正在使用的一个常规jquery。下面是我如何使用jquery

$("select").change(function()
        {
            $( "select option:selected").each(function()
            {
                if($(this).attr("value")=="static-website"){
                    $(".dynamic-website").hide();
                    $(".ecommerce-website").hide();
                    $(".seo").hide();
                    $(".graphic-design").hide();
                    $(".static-website").show();
                }
                if($(this).attr("value")=="basic-design"){
                    $(".static-website-business")..hide();
                    $(".static-website-creative").hide();


                    $(".static-website-basic").show();
                }
                if($(this).attr("value")=="business-design"){
                     $(".static-website-basic").hide();
                    $(".static-website-creative").hide();
                    $(".static-website-business").show();
                }
                if($(this).attr("value")=="creative-design"){
                     $(".static-website-basic").hide();
                    $(".static-website-business").hide();
                    $(".static-website-creative").show();

                    
                } 

}

});
        }).change();
    });

对于每个div，我不想要那么多.hide和.show属性。我的一个下拉是基于另一个和之后选择的第二个下拉选择。

这只是一个静态的网站。那我还有其他几个领域。我不知道我怎么能做到这一点。我不想让事情变得很复杂，我只是想让事情变得简单和可重用，所以我不需要使用那么多的.hide和.show

如果有什么建议。请帮帮忙。

谢谢!

javascript

jquery

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-12-19 15:50:18

更好的隐藏和显示的要求。

var oldselected;
$("select").on('change',this,function(e){
  if(oldselected){$('.'+oldselected).hide();}
  var selectedopt=$(this).val();   
  $('.'+selectedopt).show();
  oldselected=selectedopt;
  });

div:not(.website-type){display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="website-type">
                <label class=""><b>Website Type</b>
                    <select>
                        <option>--------Select--------</option>
                        <option value="static-website">Static Website</option>
                        <option value="dynamic-website">Dynamic Website</option>
                        <option value="ecommerce-website">eCommerce Website</option>
                        <option value="seo">Search Engine Optimization</option>
                        <option value="graphic-design">Graphic Design</option>
                    </select>
                </label>
            </div>


            <div class="static-website" id="static-website">

                    <label class=""><b>Design Level</b>
                        <select>
                                <option>--------Select--------</option>
                                <option value="basic-design">Basic Design</option>
                                <option value="business-design">Business Design</option>
                                <option value="creative-design">Creative Design</option>
                        </select>
                    </label>
                     <br/>



                <div class="static-website-basic">

                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Basic Static Box -->



                 <div class="static-website-business">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="10" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="10" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of BUSINESS Static Box -->



                 <div class="static-website-creative">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Creative Static Box -->


            </div> <!-- End of Static Box -->

票数 2

Stack Overflow用户

发布于 2014-12-19 16:03:28

我构建了一个快速实用程序来实现这个功能，它接受一些数据属性.

http://jsfiddle.net/buxbajvd/

<form class="progressiveDisclosure">
    <select name="selectNode" class="associatedHandler">
        <option>foobar</option>
        <option>something</option>
    </select>
</form>

<div class="associatedListener" style="display: none;" data-for="selectNode" data-value="something" data-props="matchAll">selectNode is something</div>

数据- for必须匹配处理程序名称属性，而数据值必须匹配其值，以便该节点显示。它还可以接受多个参数data-for="someSelect,someSelect2" data-value="someValue,someValue2"

还可以使用反向调理和设置data-value="!someValue"。

var progressiveDisclosure = $('.progressiveDisclosure'),
    associatedHandlers = $('.associatedHandler'),
    associatedListeners = $('.associatedListener'),

    toggleAssociatedListeners = function(e){
        var name = $(e.target).attr('name');

        $.each(associatedListeners, function(index, node){

            var names = node.associationFor,
                values = node.associationValue,
                valid = false,
                matchAll = false;

            if(node.associationOpts && node.associationOpts.indexOf('matchAll') > -1){
                matchAll = true;
            }

            var inputIsAssociation = false;
            for(var i=0;i<names.length;i++){

                if(names[i] == name){
                    inputIsAssociation = true;
                }

                var value = progressiveDisclosure.serializeArray().filter(function(input){
                    return input.name == names[i];
                })[0].value;

                if(values[i].indexOf('!') > -1 && values[i].replace('!','') !== value){
                    valid = true;
                } else if(values[i].indexOf('!') > -1 && values[i].replace('!','')  == value){
                    valid = false;
                    if(!matchAll){
                        break;
                    }
                } else if(values[i] == value){
                    valid = true;
                    if(!matchAll){
                        break;
                    }
                } else if(matchAll){
                     valid = false;
                    break;
                }
            }

            if(!inputIsAssociation){
                return;
            }

            if(valid){
                $(node).show();
            } else if(inputIsAssociation) {
                $(node).hide();
            }

        });

    }

$.each(associatedListeners, function(index, node){
    var $node = $(node),
        opts = $node.data('props');
    node.associationFor = $node.data('for').split(',');
    node.associationValue = $node.data('value').split(',');
    if(opts){
        node.associationOpts = opts.split(',');
    }
});

associatedHandlers.on('change', this, function(e){
    toggleAssociatedListeners(e);
});

票数 1

Stack Overflow用户

发布于 2014-12-19 16:53:16

我会用隐藏来显示你想要的东西，但是用一个加号尝试从原始的选择器中合成名字：

$('select').change(){
     $('.divclass').hide();//which youll have to add
     var id = $(this).val(); //or 
              $(this).find('selected').val() 
    //not sure which works for selects
     id=id.replace('design','')
     //obviously you need a replace for this specific example('design','');
     $('#static-website-'+id).show();
}

用几句话来说，您想要显示的In以及与In相关的选项或值ae。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27569196

复制

相似问题

问嵌套div显示和隐藏下拉值选择
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套div显示和隐藏下拉值选择EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套div显示和隐藏下拉值选择
EN