Javascript 在 DDL 值上显示 DIV

Javascript display DIV on DDL Value

知之甚少Javascript希望有人能帮帮我。根据 DDL 中的值,我正在尝试显示 DIV。

这是我目前的情况:

            <asp:DropDownList ID="SearchTypeDDL" runat="server" onchange="searchType();" Width="150px">
                <asp:ListItem Enabled="true" Text="Select Search type" Value="-1"></asp:ListItem>
                <asp:ListItem Text="Coordinates" Value="1"></asp:ListItem>
                <asp:ListItem Text="Postcode / Town" Value="2"></asp:ListItem>               
            </asp:DropDownList>

Javascript:

function searchType() {
        var ddl = document.getElementById("<%=SearchTypeDDL.ClientID %>");
        if (ddl.selectedIndex == '1') {
            $('#coordinates').show();
        } else {
            $('#coordinates').hide();
        }
    }

编辑:

添加了一个警报来检查传递的值:

var ddl = document.getElementById("ddl");
        var SelectedIndex = ddl.selectedIndex;
        alert(SelectedIndex);
        if (ddl.selectedIndex == '1') {
            $('#coordinates').show();               
        } else {
            $('#coordinates').hide();
        }

警报显示“1”但它跳过了 IF 语句

什么不起作用?

我将你的代码复制到 JSFiddle 中,它似乎工作得很好

<select id="ddl" onChange="searchType()">
  <option value="-1">Select Search Type</option>
  <option value="1">Coordinates</option>
  <option value="2">Postcode</option>
</select>

<div id="coordinates" style="display:none">
  Coordinates div
</div>

window.searchType = function () {
    var ddl = document.getElementById("ddl");
  if (ddl.selectedIndex == '1') {
    $('#coordinates').show();
  } else {
    $('#coordinates').hide();
  }
}

如果其他人有类似的问题,这是我用来让它工作的方法

function searchType() {
        var ddl = document.getElementById("ddl");
        var SelectedIndex = ddl.selectedIndex;           
        if (SelectedIndex == '1') {
            document.getElementById('coordinates').style.display = "block";                             
        } else (SelectedIndex== '1') {
            document.getElementById('coordinates').style.display = "none";
        }
    }