Question

我从mysql中提取数据并填充表单进行编辑。

选择框＃1的值基于它从Mysql返回的内容。

还有4个其他选择框。根据选择框＃1的值，每个应该变得可见。当使用jquery .change（）更改值时，我可以正常工作。

我想在页面加载时使用它。

例如：

选择＃1 = 13 选择＃2应该是可见的

选择＃1 == 25 选择＃3应该是可见的

选择＃1 == 9 选择＃4应该是可见的

选择＃1 == 26 选择＃5应该是可见的

否则

一切都应隐藏

这是我的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

试试这个

jsFiddle demo 更改左上角部分中第一个复选框的值，然后再次运行代码

<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 个答案: