使用 javascript 验证 Ajax 组合框答案

【问题标题】：Validate Ajax Combobox using javascript使用 javascript 验证 Ajax 组合框
【发布时间】：2012-08-25 23:59:57
【问题描述】：

我在我的代码中使用 ajax 组合框代替下拉列表，现在我想在客户端。我选择使用 javascript 并使用以下代码来验证它：

function validateCombobox(){
    var comboboxId = document.getElementById('<%=ComboBox1.ClientID%>');
    if(comboboxId.value=="some value") {
        alert("Error");
    }
}

但我无法验证组合框。

我的html代码是：

<asp:ComboBox ID="ComboBox1" runat="server"
    AutoCompleteMode="Suggest" 
    CaseSensitive="false" 
    DropDownStyle="DropDownList">
</asp:ComboBox>

浏览器上 ASP 生成的代码：

<div onchange="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$ContentPlaceHolder$ContentPlaceHolder1$unit\',\'\')', 0)"
    id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit" style="display:inline;">
    <table id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_Table"
      class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" border="0"
      style=
      "border-width:0px;border-style:None;border-collapse:collapse;display:inline;position:relative;top:5px;">
        <tr>
            <td class="ajax__combobox_textboxcontainer">
                <input type="text" autocomplete="off" style="width:150px;"
                    name="ctl00$ctl00$ContentPlaceHolder$ContentPlaceHolder1$unit$unit_TextBox"                    
                    id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_TextBox" />
            </td>
            <td class="ajax__combobox_buttoncontainer">
                <button type="button" 
                    id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_Button">
                </button>
            </td>
        </tr>
    </table>
    <ul id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_OptionList"
      class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
        <li>GM</li>
        <li>KG</li>
    </ul>
    <input type="hidden"  value="0" 
        name="ctl00$ctl00$ContentPlaceHolder$ContentPlaceHolder1$unit$unit_HiddenField"\
        id="ctl00_ctl00_ContentPlaceHolder_ContentPlaceHolder1_unit_unit_HiddenField"/>
</div>

【问题讨论】：

“但我无法验证组合框” - 为什么？您遇到错误了吗？
“但我无法验证组合框”我的意思是我无法让组合框的值与我的 if 条件匹配。当我使用其他 asp 控件（如文本框或任何其他控件）时，这会有所帮助。

标签： javascript asp.net asp.net-ajax

【解决方案1】：

在@Sethu 和@Scott 给出的答案的帮助下得到了解决方案：

我使用以下代码：

function validateCombobox(){
    var comboBox = document.getElementById('<%=ComboBox1.ClientID%>_ComboBox1_TextBox');
    if(comboBox.value=="some value")
    {
        alert("Error");
    }
}

【讨论】：

【解决方案2】：

组合框在客户端创建多个html。

最初该值存储在隐藏字段中。

function validateCombobox()
{
var comboCotainer= document.getElementById('<%=ComboBox1.ClientID%>');
var hdnField = FindChild(comboCotainer);
if(hdnField != null && hdnField.value == "-1")
{
 alert("Error");
}
}

function FindChild(container) {
        var hiddenControl = null;
        if (container.children && container.children.length > 0) {
            for (var i = 0; i < container.children.length; i++) {
                if (container.children[i].type == "hidden") {
                    hiddenControl = container.children[i];
                    break;
                 }
            }
        }

        return hiddenControl;
    }

一点 jquery 将消除 FindChild 函数

如果你使用 Jquery，那么使用下面的代码

function validateCombobox() {
        var selectedVal = $('#<%=ComboBox1.ClientID%> input[type=hidden]').val();
        if (selectedVal == "-1") {
            alert("Error");
        }
    }

隐藏控件保存选中项的索引，因此检查 -1 或非负值

【讨论】：

您已更新代码以包含可能会更改的静态引用 ctl00_ctl00...。
@Sethu 您正在使用静态引用，如果我更改我的母版页，那么引用将被更改，我们需要对所有脚本进行更改。你不觉得这是一项非常乏味的任务。

【解决方案3】：

试试这个。

function validateCombobox(){
    var comboboxObject = document.getElementById('<%=ComboBox1.ClientID%>');
    var inputs = comboboxObject.getElementsByTagName('input');
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'text' && inputs[i].value == "some value") {
            alert("Error");
            break; //why loop further?
        }
    }
}

【讨论】：

thnx naveen 它更简单的解决方案。