javascript - adding an onchange event to select - Stack Overflow

admin管理员组

文章数量:1278851

I have the following js code:

function createConBox() {
   var charDiv = document.getElementById("characterList");  // reference to "characterList" div
   header = document.createElement("p");  // creates the <p> tag
   charDiv.appendChild(header);  // adds the <p> tag to the parent node
   title = document.createTextNode("Show Only Lines By:");  // creates the text string
   header.appendChild(title); // adds the text string to the parent node

   // create select box and add elements
   selectBox = document.createElement("select");   
   selectBox.setAttribute("id", "cList");
   charDiv.appendChild(selectBox);

   charNames = uniqueElemText("h3");   // array of character names
   newOption = document.createElement("option");
   selectBox.appendChild(newOption);
   newOptionTitle = document.createTextNode("Show All Lines");
   newOption.appendChild(newOptionTitle);
   for (i = 0; i < charNames.length; i++) {
      newOption = document.createElement("option");
      selectBox.appendChild(newOption);
      newOptionTitle = document.createTextNode(charNames[i]);
      newOption.appendChild(newOptionTitle);
   }

}

function showLines() {
   alert("The Box has been changed");
}

Every time the option in the box is changed, I want it to call 'showLines()'. However, every time I try to implement an event, I can only get it to trigger when the page loads, and never again thereafter.

I have the following js code:

function createConBox() {
   var charDiv = document.getElementById("characterList");  // reference to "characterList" div
   header = document.createElement("p");  // creates the <p> tag
   charDiv.appendChild(header);  // adds the <p> tag to the parent node
   title = document.createTextNode("Show Only Lines By:");  // creates the text string
   header.appendChild(title); // adds the text string to the parent node

   // create select box and add elements
   selectBox = document.createElement("select");   
   selectBox.setAttribute("id", "cList");
   charDiv.appendChild(selectBox);

   charNames = uniqueElemText("h3");   // array of character names
   newOption = document.createElement("option");
   selectBox.appendChild(newOption);
   newOptionTitle = document.createTextNode("Show All Lines");
   newOption.appendChild(newOptionTitle);
   for (i = 0; i < charNames.length; i++) {
      newOption = document.createElement("option");
      selectBox.appendChild(newOption);
      newOptionTitle = document.createTextNode(charNames[i]);
      newOption.appendChild(newOptionTitle);
   }

}

function showLines() {
   alert("The Box has been changed");
}

Every time the option in the box is changed, I want it to call 'showLines()'. However, every time I try to implement an event, I can only get it to trigger when the page loads, and never again thereafter.

• javascript
• select
• onchange

Share Improve this question Follow edited Sep 8, 2022 at 15:15 Daniel Widdis 9,1401313 gold badges4848 silver badges6868 bronze badges asked Mar 17, 2013 at 20:15 user1527185user1527185

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

selectBox.onchange = showLines; should solve your problem.

in some browsers onchange get fired only after blurring select box. to over e this you can use onclick instead of onchange

My guess is that you're doing this:

selectBox.onchange = showLines();

If that's the case, just remove the ():

selectBox.onchange = showLines;

When I pass dynamically id in case then what I do:

var selectcell = tablerow.insertCell(1);
var selectelmt = document.createElement('select');
selectelmt.name = 'Select';
selectelmt.value = 'select';
selectelmt.classList = 'form-control input-sm cobclass';
selectelmt.onchange= onselectchange(i);
selectelmt.id = 'cobselect' + i;
selectelmt.options[0] = new Option('select');
selectcell.appendChild(selectelmt);
// ddrbind(i);
show();
i++;`

本文标签： javascriptadding an onchange event to selectStack Overflow