jQuery根据不同选择框的选择值使选择框在页面加载时可见

Question

I am pulling data from mysql and populating a form for edit. 我正在从mysql中提取数据并填充表单以进行编辑。

Select box #1 has a value based on what it returned from Mysql. 选择框＃1的值基于它从Mysql返回的值。

There are 4 other select boxes. 还有其他4个选择框。 Each one should become visible based on the value of select box #1. 基于选择框＃1的值，每一个都应该可见。 I have this working fine when the value is changed using the jquery .change(). 当使用jquery .change（）更改值时，我的工作正常。

I want this to work when the page is loaded. 我希望此功能在页面加载时起作用。

For example: 例如：

Select #1 = 13 Select #2 should be visible 选择＃1 = 13选择＃2应该可见

Select #1 == 25 Select #3 should be visible 选择＃1 == 25选择＃3应该可见

Select #1 == 9 Select #4 should be visible 选择＃1 == 9选择＃4应该可见

Select #1 == 26 Select #5 should be visible 选择＃1 == 26选择＃5应该可见

else 其他

all should be hidden 所有都应该隐藏

Here is my jQuery: 这是我的jQuery：

       <script>
    var foulTypes = $('#foulTypes');
    var select = this.value;

    //alert the value of Selectbox #1
    alert($('#foulTypes').val());
    if ($('#foulTypes').val() == '13') {
        $('#catDPI').show();
    }

    foulTypes.change(function () {
    //We first disable all, so we dont submit data for more than 1 category
        $("#catDPI, #catOPI, #catOH,  #catDH").hide().find("#category").attr("disabled", true);
    var $divSelectedCategory;
        if ($(this).val() == '13') {
                $divSelectedCategory = $("#catDPI"); 
            $('#catDPI').show();
        } else {
            $('#catDPI').hide();
        }

        if ($(this).val() == '51') {
            $('#catOPI').show();
            $divSelectedCategory = $("#catOPI"); 
        } else {
            $('#catOPI').hide();
        }

        if( $(this).val() == "50"){
            $divSelectedCategory = $("#catOH"); 
            $('#catOH').show();
        } else {
            $('#catOH').hide();
        }

        if( $(this).val() == "9"){
            $divSelectedCategory = $("#catDH"); 
            $('#catDH').show();
        } else {
            $('#catDH').hide();
        }
        //We now enable only for the selected category        
            $divSelectedCategory.show().find("#category").attr("disabled", false).val('');
    }); 
       </script>

Answer 1

try this then 然后试试这个

jsFiddle demo change the value of the first checkbox in the top left part and then run the code again jsFiddle演示更改左上方的第一个复选框的值，然后再次运行代码

<body>
    <input type="checkbox" value="25" id="sel1" checked="checked" />
    <br/>
    <input type="checkbox" value="2" id="sel2" data-trigger="13" />
    <input type="checkbox" value="3" id="sel3" data-trigger="25" />
    <input type="checkbox" value="4" id="sel4" data-trigger="9" />
    <input type="checkbox" value="1" id="sel5" data-trigger="26" />
    <br/>
    <input type="button" onclick="initCheckboxes();" value="update" />
</body>


window.initCheckboxes = function () {
    var val   = $("#sel1").prop("value"), 
        check = $("[data-trigger="+val+"]");
    $("[data-trigger]").hide();//hide all others
    //and show relevant

    if ( $("#sel1").prop("checked") ) {
        check.prop("checked", "checked");
        check.show();
    } else {
        $("[data-trigger]").prop("checked", false);
    }
}
$(document).ready(initCheckboxes);

jQuery根据不同选择框的选择值使选择框在页面加载时可见

问题描述

1 个解决方案

解决方案1
0 2013-12-03 18:05:38

jQuery根据不同选择框的选择值使选择框在页面加载时可见

问题描述

1 个解决方案

解决方案1 0 2013-12-03 18:05:38

解决方案1
0 2013-12-03 18:05:38