JavaScript to display asp:TextBox based on selected option

Question

I just recently started developing some parts of the ASP.NET project but I have very little experience of it. The problem is pretty much as described in a title of this question and here goes the code:

<script type="text/javascript" src="/scripts/hide.fields.js"></script>   

<divs and divs...>

<asp:DropDownList class="dropdown expand" ID="EligibleUK" onchange="visaCheck(this.ListItem.GetValue());" runat="server">
                        <asp:ListItem
                            Enabled="True"
                            Text="Choose..."
                            Value=""
                        />
                        <asp:ListItem
                            Enabled="True"
                            Text="Yes (UK/EU Cittizen)"
                            Value="Yes (UK/EU Cittizen)"
                        />
                        <asp:ListItem
                            Enabled="True"
                            Text="Yes (Work Visa)"
                            Value="Yes (Work Visa)"
                        />
                        <asp:ListItem
                            Enabled="True"
                            Text="No"
                            Value="No"
                        />
                    </asp:DropDownList>

the content of my JS file:

function visaCheck(visa) {
if (visa === "Yes (Work Visa)"){
    document.getElementById(visa1).style.display = "block";
    document.getElementById(visa2).style.display = "block";
}else{
    document.getElementById(visa1).style.display = "none";
    document.getElementById(visa2).style.display = "none";
}   

}

Now I tried different things in the html (.master strictly speaking) where I call the JS function code, such as:

this.ListItem
asp:ListItem
ListItem.Value
this.ListItem.Value
this.ListItem.Value()
this.ListItem.GetValue()

including the most obvious one (this.value) which worked with standard html file and in jsfiddle. Is there any specific way of doing it in ASP.NET? What am I missing and how do I fix this problem? Thanks for your answers.

Answer 1

尝试更改：

<asp:DropDownList class="dropdown expand" ID="EligibleUK" onchange="visaCheck(this.options[this.selectdIndex].value);" runat="server">

Answer 2

I post an answer under my own question so it's more visible. I call js function with no argument and my javascript looks like this now:

function visaCheck() {
var visa = document.getElementById('Content_EligibleUK');
var selectedIndex = visa.selectedIndex;
var value = visa.options[selectedIndex].value

if (value === "Yes (Work Visa)"){
    document.getElementById("visa1").style.display = "block";
    document.getElementById("visa2").style.display = "block";
}else{
    document.getElementById("visa1").style.display = "none";
    document.getElementById("visa2").style.display = "none";
}   

}

hope this helps some folks in the future :)