$(this) 对象可以用来指向函数吗

发布于 12-11 03:26 字数 1862 浏览 1 评论 0原文

我有一个代码如下:

    function showHideOptions() {
        $("#template1, #template2, #template3, #template4").css("display","none");
        $(this).css("display","block");
}

我有四个选择下拉菜单,在特定时间我只想在模板选择器的选项上选择一个。

    <select id="masterdropdown">
        <option>T1</option>
        <option>T2</option>
        <option>T3</option>
        <option>T4</option>
    </select> 


<select id="template1" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2"  onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

CSS:

#template1, #template2, #template3, #template4{display:none;}

基本上我有一个顶部下拉菜单(masterdropdown),它始终可见,这也是一个模板选择器,在选择其选项时,我想显示与 masterdropdown 中所选选项相对应的特定模板下拉菜单。 jquery 中如何实现这一点?在这种情况下,从函数调用 $(this) 不起作用。

I have a code something below:

    function showHideOptions() {
        $("#template1, #template2, #template3, #template4").css("display","none");
        $(this).css("display","block");
}

And I have four select dropdowns, At a particular time I want to select only one on the option of template selector.

    <select id="masterdropdown">
        <option>T1</option>
        <option>T2</option>
        <option>T3</option>
        <option>T4</option>
    </select> 


<select id="template1" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2"  onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

CSS:

#template1, #template2, #template3, #template4{display:none;}

Basically I have a top dropdown(masterdropdown), which is always Visible this is also a template selector, On select of its options I want to show a particular template drodown that corresponds to that selected option in masterdropdown. How can this be acheived in jquery. does $(this) not work in this case, being called from a function.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

柠檬心2024-12-18 03:26:34

查看有效的演示 http://jsfiddle.net/X5mWL/

JS

$(function(){
        $("#masterdropdown").change(function() {
            $("#template1, #template2, #template3, #template4").hide();
            $($("#masterdropdown").val()).show();
    });
});

HTML

 <select id="masterdropdown">
        <option value="#template1">T1</option>
        <option value="#template2">T2</option>
        <option value="#template3">T3</option>
        <option value="#template4">T4</option>
    </select> 


<select id="template1">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

See a working Demo http://jsfiddle.net/X5mWL/

JS

$(function(){
        $("#masterdropdown").change(function() {
            $("#template1, #template2, #template3, #template4").hide();
            $($("#masterdropdown").val()).show();
    });
});

HTML

 <select id="masterdropdown">
        <option value="#template1">T1</option>
        <option value="#template2">T2</option>
        <option value="#template3">T3</option>
        <option value="#template4">T4</option>
    </select> 


<select id="template1">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 
§对你不离不弃2024-12-18 03:26:34
        <script>
        $(document).ready(function() {
          $('#masterdropdown').showHideOptions().change();
        });

        $.fn.showHideOptions = function() {
         this.change(function() {
           $(".templateDropdowns").hide();
           $('#' + $(this).val()).show();
        });
        return this;
        };

        </script>

        <select id="masterdropdown">
        <option value="template1">template1</option>
        <option value="template2">template2</option>
        <option value="template3">template3</option>
        </select>  
        <select id="template1" class="templateDropdowns">
         <option>ta</option>
         <option>tat</option>
        </select>
        <select id="template2" class="templateDropdowns">
        <option>ete</option>
        <option>eTee</option>
        </select>
        <select id="template3" class="templateDropdowns">
        <option>Te</option>
        <option>Tet</option>
        </select> 
        <script>
        $(document).ready(function() {
          $('#masterdropdown').showHideOptions().change();
        });

        $.fn.showHideOptions = function() {
         this.change(function() {
           $(".templateDropdowns").hide();
           $('#' + $(this).val()).show();
        });
        return this;
        };

        </script>

        <select id="masterdropdown">
        <option value="template1">template1</option>
        <option value="template2">template2</option>
        <option value="template3">template3</option>
        </select>  
        <select id="template1" class="templateDropdowns">
         <option>ta</option>
         <option>tat</option>
        </select>
        <select id="template2" class="templateDropdowns">
        <option>ete</option>
        <option>eTee</option>
        </select>
        <select id="template3" class="templateDropdowns">
        <option>Te</option>
        <option>Tet</option>
        </select> 
叹倦2024-12-18 03:26:34

将更改事件处理程序附加到您的主下拉列表中。

在其中,只需检查选择的值,然后显示/隐藏相应的下拉列表。

像这样的东西(在javascript上有点生疏)

$("masterdropdown").change(function() {

$("#template1, #template2, #template3, #template4").hide();
var selText = $(this).search("选项:已选择").text();
if(selText == 'T1') $("#template1").show();
if(selText == 'T2') $("#template2").show();
if(selText == 'T3') $("#template3").show();
if(selText == 'T4') $("#template4").show();

});

Attach a change event handler to your master drop down.

In it, just check the select value, and show/hide the corrisponding dropdowns.

Something like this (a bit rusty on javascript)

$("masterdropdown").change(function() {

$("#template1, #template2, #template3, #template4").hide();
var selText = $(this).search("option:selected").text();
if(selText == 'T1') $("#template1").show();
if(selText == 'T2') $("#template2").show();
if(selText == 'T3') $("#template3").show();
if(selText == 'T4') $("#template4").show();

});

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文