在javascript中传递id并查找元素

本文关键字：查找 元素 id javascript | 更新日期: 2023-09-27 17:50:59

我对JavaScript非常陌生，对这个问题感到困惑。我试图将Control的ClientID发送到js函数。然后该函数应该找到该元素并获得Control's值。要注意:我使用的是一个母版页，我传递的ClientID的Control在UserControl中。

ASP: 

//code here
<asp:TableCell runat="server">
    <asp:DropDownList runat="server" ID="variableDDL"/>
    //some ListItems
</asp:Tablecell>
//more cells here
<asp:TableCell runat="server">
    <asp:ImageButton runat="server" ID="iButton" ImageUrl="~/Images/iButton.png" OnClientClick="iButtonClick(<%=variableDDL.ClientID%>);"/>
</asp:TableCell>
//code here

. js: 

function iButtonClick(ClientID)
{
    var v = document.getElementById(ClientID);
    var val = v.value;
    alert(val);
}

每次我点击按钮，什么也没发生。将发送的参数更改为<%#variableDDL.ClientID%>可以做同样的事情。将其更改为'<%=variableDDL.ClientID%>'或'<%#variableDDL.ClientID%>'会产生空指针错误，因为它找不到对象。该脚本被正确引用，如果我将其更改为不接受参数而仅生成警报，则会触发该脚本。有人知道我哪里做错了吗?

编辑:请求的代码如下所示。

ASP用户:

protected void Page_Init(object sender, EventArgs e) {
    DataTable fields = (DataTable) Session["fields"];
    for(int i = 0; i < fields.Rows.Count; i++)
    {
        variableDDL.Items.Add(new ListItem(fields.Rows[i]["Field"].ToString(), fields.Rows[i]["Field"].ToString();
    }
}

渲染OnClick HTML:'<%=variableDDL.ClientID%>'生产

onclick="iButtonClick(&#39;&lt;%=variableDDL.ClientID%>&#39;);"

<%=variableDDL.ClientID%>产生

onclick="iButtonClick(&lt;%=variableDDL.ClientID%>);"

'<%#variableDDL.ClientID%>'产生

onclick="iButtonClick(&#39;&lt;%#variableDDL.ClientID%>&#39;);"

<%#variableDDL.ClientID%>产生

onclick="iButtonClick(&lt;%#variableDDL.ClientID%>);"

在javascript中传递id并查找元素

看起来，

OnClientClick="iButtonClick(<%=variableDDL.ClientID%>);"

是按字面意思呈现的——它没有替换尖括号的内容。

试

OnClientClick='iButtonClick("<%=variableDDL.ClientID%>");'

注意属性的单引号——我认为这个确实有区别——和双引号，所以结果变成一个JavaScript字符串字面值。

如果这不起作用，您可能需要设置

iButton.OnClientClick = "iButtonClick('" + variableDDl.ClientID + "');";

如果您不反对jQuery，您可以通过向select元素添加标识类来轻松执行此操作，因为它获得唯一的客户端id。

<select id="variableDDL" class='varddl'>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
</select>
<button id="btn1" type="button">Click here</click>

$("#btn1").click(function(e){
  var v = $(".varddl:first-child").val();
  alert('Value of '+ $(".varddl:first-child").attr('id') + 'is ' + v);
});

点击这里查看小提琴

UPDATE: Pure JS Version

function btnClick(e){
   //Select the first occurance, [0]
   var ele = document.getElementsByClassName('varddl')[0];
      if(ele){
         //There's the value
         var val = ele.value;
         alert(val);
      }
}
var btn1 = document.getElementById("btn1");
btn1.onclick = btnClick

;

这是JS唯一的提琴

你不能在ASP中使用servercode (<%%>)。净WebControls。

你可以通过将ClientID直接放在javascript代码中来解决这个问题:

function iButtonClick()
{
    var v = document.getElementById('<%= variableDDL.ClientID %>');
    var val = v.value;
    alert(val);
}

你也可以直接在OnClientClick中传递一个对象，但限制是你只能发送对象本身:

OnClientClick="ButtonClick(this);"
相关文章：