根据页面加载时的下拉值显示文本框

Question

我需要基于在页面加载的下拉菜单上选择的值来显示文本框。

我的下拉菜单的ID-文本框的#inputtype ID是#checkboxvalues。

我只是在做简单的“如果inputtype是checkbox显示checkboxvalues。

它似乎不起作用。 但是on（change）函数可以正常工作。 也就是说，如果我将下拉列表更改为其他内容并选择“复选框，则它将显示正确的文本框。

谢谢你的时间。

$(document).ready(function(){
    var inputtype = $( "#inputtype" ).val();
    if (inputtype === "Checkbox"){
        $("#checkboxvalues").show();
    }
    if (inputtype != "Checkbox"){
        $("#checkboxvalues").hide();
    }
    if (inputtype != "Radio"){
        $("#radiovalues").hide();
    }
    if (inputtype != "Checkbox with Other"){
        $("#checkboxvalues").hide();
    }
    if (inputtype != "Radio with Other"){
        $("#radiovalues").hide();
    }


    $('#inputtype').on('change',function(){
        var inputtype = $( "#inputtype" ).val();
        if (inputtype === "Checkbox"){
            $("#checkboxvalues").show();
            $("#radiovalues").hide();
        } else if (inputtype === "Radio") {
            $("#radiovalues").show();
            $("#checkboxvalues").hide();
        }  else if (inputtype === "Checkbox with Other") {
            $("#checkboxvalues").show();
            $("#radiovalues").hide();
        }  else if (inputtype === "Radio with Other") {
            $("#radiovalues").show();
            $("#checkboxvalues").hide();
        } 
        else {
            $("#checkboxvalues").hide();
            $("#radiovalues").hide();
        }
    });

});

这是表格部分

                        <Li>
                            Field input type  : 
                            <select name="fieldinputtype" id="inputtype">
                                <option value="Text Box" <% if (editedsitefield.fieldinputtype == "Text Box") { %> Selected <% } %>>Text Box</option>
                                <option value="Text Area" <% if (editedsitefield.fieldinputtype == "Text Area") { %> Selected <% } %>>Text Area</option>
                                <option value="Checkbox" <% if (editedsitefield.fieldinputtype == "Checkbox") { %> Selected <% } %>>Checkbox</option>
                                <option value="Radio" <% if (editedsitefield.fieldinputtype == "Radio") { %> Selected <% } %>>Radio</option>
                                <option value="TextBox with Checkbox" <% if (editedsitefield.fieldinputtype == "TextBox with Checkbox") { %> Selected <% } %>>TextBox with Checkbox</option>
                                <option value="TextBox with Radio" <% if (editedsitefield.fieldinputtype == "TextBox with Radio") { %> Selected <% } %>>TextBox with Radio</option>
                                <option value="Checkbox with Other" <% if (editedsitefield.fieldinputtype == "Checkbox with Other") { %> Selected <% } %>>Checkbox with Other</option>                                
                                <option value="Radio with Other" <% if (editedsitefield.fieldinputtype == "Radio with Other") { %> Selected <% } %>>Radio with Other</option>                                
                            </select>
                        </Li>
                        <Li id="checkboxvalues">
                            Checkbox Values:
                            <input class="admstudyinput" type="text" name="checkboxvalues" value="<%= editedsitefield.checkboxvalues %>">
                        </Li>

Answer 1

这应该工作，

var inputtype = $( "#inputtype option:selected" ).val();

希望能帮助到你！

并尝试使用数组而不是比较每个单独的文本(editedsitefield.fieldinputtype == "Text Box") ，即像在数组中存储值一样存储“ Text Box”，循环遍历它。

Answer 2

您在此行的加载函数中隐藏了文本框：

if (inputtype != "Checkbox with Other"){
    $("#checkboxvalues").hide();
}

关于代码审查，您可能希望将所有逻辑放在一个函数中，因此只调用一次即可。

$(document).ready(function(){
    function updateInputs() {
        var inputtype = $( "#inputtype" ).val();
        $("#checkboxvalues").toggle(inputtype === "Checkbox" || inputtype === "Checkbox with Other");
        $("#radiovalues").toggle(inputtype === "Radio" || inputtype === "Radio with Other");
    }
    updateInputs();
    $('#inputtype').on('change', updateInputs);    
});

Answer 3

您的代码应该可以工作。 您确定<％= editedsitefield.checkboxvalues％>返回要比较的值吗？

您也可以通过删除重复的行并将其移入函数中来优化代码，如下所示：

$(document).ready(function(){
    function checkInputs() {
        var inputtype = $("#inputtype").val();
        var $checkbox = $("#checkboxvalues");
        var $radio = $("#radiovalues");

        if (inputtype === "Checkbox"){
            $checkbox.show();
        }
        if (inputtype != "Checkbox"){
            $checkbox.hide();
        }
        if (inputtype != "Radio"){
            $radio.hide();
        }
        if (inputtype != "Checkbox with Other"){
            $checkbox.hide();
        }
        if (inputtype != "Radio with Other"){
            $radio.hide();
        }
    }
    checkInputs(); // calling function when document is ready

    $('#inputtype').on('change', function(){
        checkInputs(); // calling function on change event
    });

});

PS尽量避免在html属性Selected中使用以大写字母开头的单词，请使用selected