如何在选择多选下拉列表时显示文本框

Question

大家好我已经通过此处的复选框了解了下拉列表的示例

http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=79

对我来说很好。但根据我的要求，我将在下拉菜单中有3个项目，如果我选择所有我想启用表格上可用的所有3个文本框。如果不是我想只使相应的文本框可见

所以在脚本和我的测试中我写的如下

<script language="javascript">
    function GetSelectedValue() {
        var chkBox = document.getElementById("<%=chkList.ClientID%>");
        var checkbox = chkBox.getElementsByTagName("input");
        var objTextBox = document.getElementById("<%=txtChkValue.ClientID%>");
        var obj1 = document.getElementById("<%=txt1.ClientID%>");
        var counter = 0;
        objTextBox.value = "";
        for (var i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked) {

                var chkBoxText = checkbox[i].parentNode.getElementsByTagName("label");
                if (objTextBox.value == "") {
                    objTextBox.value = chkBoxText[0].innerHTML;
                    if (objTextBox.value = "hi") {

                       document.getElementById("<%=txt1.ClientID%>").style.visibility = 'visible'; // This is what i tested but this is not working                        }

                }
                else {
                    objTextBox.value = objTextBox.value + ", " + chkBoxText[0].innerHTML;
                }
            }
        }
    }
</script>

任何人都可以帮助我

Answer 1

快速修复：

更改

document.getElementById("<%=txt1.ClientID%>").style.visibility = 'visible'; // This is what i tested but this is not working  

到

$("#<%=txt1.ClientID%>").show();  

我还建议你重构你的JS函数并传入ClientID并使用jQuery选择器：

//note: I haven't tested all the selectors
function GetSelectedValue(chkList, txtChk, txt1) {
    var chkBox = $("#"+ chkList);
    var checkbox = chkBox.find("input");
    var objTextBox = $("#" + txt1);
    var obj1 =$("#" + txtChk);
    objTextBox.val("");
    $.each(checkbox, function(cbItem) {
        if (cbItem.checked) {
            var chkBoxText = cbItem.parent.find("label")[0];
            if (objTextBox.val() == "") {
                objTextBox.val(chkBoxText.html());
                if (objTextBox.val() == "hi") {
                   obj1.show();                      
                 }
            }
            else {
                objTextBox.val(objTextBox.val()+ ", " + chkBoxText.html());
            }
        }
     });
}

Answer 2

document.getElementById("<%=txt1.ClientID%>").style.visibility = 'visible';将此更改为 document.getElementById("<%=txt1.ClientID%>").style.visibility = '';或 document.getElementById("<%=txt1.ClientID%>").style.visibility = 'block';

Answer 3

您是否尝试过使用：

    document.getElementById("<%=txt1.ClientID%>").style.display = "none"

和

    document.getElementById("<%=txt1.ClientID%>").style.display = "block"

或者你引用的例子有jQuery：

    $('<%=txt1.ClientID%>').hide();

或

    $('<%=txt1.ClientID%>').show();