DropDownList onChange not working at selectedIndex 0_问答_开发者

DropDownList onChange not working at selectedIndex 0

开发者 https://www.devze.com 2023-01-05 07:59 出处：网络

Okay I have a question, may be simple. But I cannot seem to understand what is going on. I have 3 security question drop down menus. I have javascript on the ASPX page that removes questions/repopulates them when you select a questions (so you cannot reselect the questions in the other 2 boxes). This works wonderfully when a user is editing their profile with already selected questions. However, when a user first selects the questions where all three boxes are listing "Please select a question" at selectedIndex 0, the onChange doesn't fire. The function won't even go. I think this has a big something to do with the on change from selected index of 0. I have debugged this thing and it do开发者_开发知识库esn't even enter the function. I even set the onchange action to flash an alert. It just seems something is going wrong when i try to action onchange from selected index of 0. Any ideas?

Maybe I'm missing something here from what you are describing.. The onChanged event will only fire if the selectedIndex changes. So if you bring down a dropdown list at selectedIndex(0) and re-select the first item onChange will not fire.

The first of a select tag's options (index 0) is by default already selected. This is why your onChange event won't fire if it is selected again.

The answers to this popular question may help. To allow your event to fire when any option is selected, you could for example change the default to 'no option selected' like this:

document.getElementById("mySelectTagId").selectedIndex = -1;

When you repopulate the lists, if you replace the item at index 0 ("Please selecte a question") with another item that represents a question then your event will not fire.

Either

1. You preserve the first item as a none selected index (so your drop downs will always show "please select a question" and the user need to change it). Or

2. You fire your event manually after you finish repopulating the dropdowns:

<html>
<head>
<script type="text/javascript">

function sOnChange(){
    alert('Changed');
}

function replaceItems(){
    var dropDown = document.getElementById('s');
    dropDown.innerHTML = "";
    for(var x=0;x<5;x++){
        var opt = document.createElement("option");
        opt.value = x;
        opt.appendChild(document.createTextNode("New options" + (x+1)));
        dropDown.appendChild(opt);
    }
    dropDown.onchange();
}
</script>
</head>
<body>
    <input type="button" onclick="replaceItems();" value="Replace Items"/>
    <select id="s" onchange="sOnChange()">
        <option>Press the button Please</option>
    </select>
</body>
</html>