asp with javascript

I have an asp开发者_如何学C.net page, and I want to hide a div on the page when the index of the asp:DropDownList is 0 using javascript.

I know how to hide the div but I do need help on how to get the selected index of the asp:DropDownLists using javascript.

This is what I have in the javascript:

 function hideDiv() {
      var drpCampDock = document.getElementById('drpListCampaignDocketTemplate');
      var drpCampType = document.getElementById('drpCampaignType');

when it gets to this check it gives an error.

        if (drpCampDock.selectedIndex == 0) {
           document.getElementById('divBuilderMain').style.visibility = 'hidden';
        }
    }

The error I get is

Microsoft JScript runtime error: Object required

I guess your problem is that the (client-side) ID of the rendered select element is not the same as the server-side ID of the asp:DropDownList (have a look at the HTML source code rendered in the browser to confirm this).

To get the correct client-side element, you'll have to use the following code:

var drpCampType = document.getElementById('<%= drpCampaignType.ClientID %>');

Alternatively you can change the ASP.NET markup to this and pass the div's ID and the dropdownlist's current selection to the javascript function:

<asp:DropDownList ... onchange="hideDiv('divBuilderMain', this.value)" />
...
function hideDiv(divId, ddlIndex)
{
  if (ddlIndex == 0) document.getElementById(divId).style.visibility = 'hidden';
}

are you using .NET masterpages?

Then you will have to find out what the resulted ID will be for your dropdownlist. Debug the page in IE (F12) and look at the ID you are getting, it will contain id's from your masterpage as well, hence why your function is not picking up the right id.

Suppose i've got an update panel with a button in my page (using masterpages)

--snip--

       <ContentTemplate>
            <asp:Button ID="Hiddenbutton" runat="server" Text="" />
        </ContentTemplate>

--snip--

One way of gettting the ID to remain unchanged is to use an Input field

 <input type="hidden" id="unchangedHidden" value="<%=Hiddenbutton.ClientID%>" />

If i want to click this button from within Java

function TestcodeBehind2()
{
 var o =document.getElementById('unchangedHidden').getAttribute('value');
 document.getElementById(o).click();
 }

by reading the value of the hidden input field, i'm sure i'll get the correct ID, wether i'm using masterpages or not .

I found out that using

 var o =document.getElementById('<%=Hiddenbutton%>');  

not always resulted in a succesful retrieval of the ID with my masterpages.

I do this when I need selectedIndex:

var collx = document.getElementsByName("zmembertype");  
  for (ix = 0 ; ix < collx.length; ix++ ) {  
  if (collx[ix].checked)  
    temp = collx[ix].value;  
  }  

I think you need a loop ?

For future reference, a good way to approach these problems is by looking at the source of the page this script is running on. For eg, an asp:dropdownlist gets rendered in html that will generally look something like this.

<select>
    <option value=""></option>
    <option value="FirstOption">First option</option>
    <option value="SecondOption">Second option</option>
</select>

So base on that, you can do the following in script in hideDiv

function hideDiv() {
    var drpCampDock = document.getElementById('drpListCampaignDocketTemplate');
    var drpCampType = document.getElementById('drpCampaignType');

    var drpCampTypeValue = drpCampType.options[drpCampType.selectedIndex].value;

The last line is assuming that you 'drpCampaignType' is actually the name of the 'select' element. If 'drpCampaignType' is the name of a surrounding element, try something like

var drpCampType = document.getElementById('drpCampaignType').getElementsByTagName('select')[0];

continue with the same line of code as above as it will assign drpCampType to the correct select element.

As I said, it's always good to have a look at the source to help you out.

HTH

Call JS function on Drop down on change event

for ex like as

<asp:DropDownList ID="ddl" onchange="linkURL(this)" runat="server">
 </asp:DropDownList>

// JS function

function linkURL(URL) 
    {
        alert (URL.options[URL.selectedIndex].value);
    }