如何将“ selected =&#39;selected&#39;”属性分配给特定 <option>在一个<select>清单。请只使用VanillaJS

Question

Click the about menu button to see the "About" display in the select list. I'd like each option match the clicked button.

<select name="selectList" id="mySelect">
     <option value="one">Home</option>
     <option value="two">About</option>
     <option value="three">Hobbies</option>
     <option value="four">Blog</option>
     <option value="five">Contact</option>
</select>

<nav>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Hobbies</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

var nav = document.getElementById("nav");
var mySelect = document.getElementById("mySelect");

for (i = 0; i < nav.children.length;i++) {
    nav.children[i].addEventListener("click", function() {
      mySelect[1].selected='selected';
    })
};

Answer 1

When you add the event listener, on the function add a parameter. This will contain the event.

The event.target contains the element that has fired the event, so you can do event.target.setAttribute("selected", "selected")

For example:

nav.children[i].addEeventListener("click", function(event){
    event.target.setAttribute("selected", "selected");
});

PD: Don't forget to removeAttribute from the other items

Answer 2

THe problem is within the way you register your event listeners. You do it inside a loop. This is wrong . Event listening is asynchronous, which means that the listeners are really going to work after the current loop is over. (Same goes for any async activity, including setTimeout . Just try using a setTimeout inside a loop and you will see how it behaves - it won't be the way you expected!) And when the loop is over, the value of i is going to be 5, and there is no option with index 5. Here is another way of registering listeners, if you are okay with writing in in the html.

 var nav = document.getElementById("nav"); var mySelect = document.getElementById("mySelect"); function onNavClick(index) { mySelect.children[index].selected = 'selected'; } 

 <select name="selectList" id="mySelect"> <option value="one">Home</option> <option value="two">About</option> <option value="three">Hobbies</option> <option value="four">Blog</option> <option value="five">Contact</option> </select> <nav> <ul id="nav"> <li><a href="#" onclick="onNavClick(0)">Home</a></li> <li><a href="#" onclick="onNavClick(1)">About</a></li> <li><a href="#" onclick="onNavClick(2)">Hobbies</a></li> <li><a href="#" onclick="onNavClick(3)">Blog</a></li> <li><a href="#" onclick="onNavClick(4)">Contact</a></li> </ul> </nav> 

Answer 3

You could check the textContent of the target element of the event to check if the values match the options and select the one you want. Here is a snippet:

 var nav = document.getElementById("nav"); var mySelect = document.getElementById("mySelect"); for (var i = 0; i < nav.children.length; i++) { nav.children[i].addEventListener("click", function (e) { var text = e.target.textContent; var options = mySelect.getElementsByTagName('option'); for (var j = 0; j < options.length; j++) { var option = options[j]; if (option.text === text) { option.selected = 'selected'; } else { option.selected = null; } } }); } 

 <select name="selectList" id="mySelect"> <option value="one">Home</option> <option value="two">About</option> <option value="three">Hobbies</option> <option value="four">Blog</option> <option value="five">Contact</option> </select> <nav> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> 

Answer 4

By the time a click event fires, the loop has already run its course.
Since the variable i is in global scope, the value referenced from each handler will be the same.
In the example below, notice that each handler references last value in the loop (5):

 var mySelect = document.getElementById("mySelect"); for (i = 0; i < nav.children.length; i++) { nav.children[i].addEventListener("click", function() { console.log(i); }) }; 

 <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> 

---

One technique is to use a closure .
For reference, also see Creating Closures in Loops - A Common Mistake .

 var nav = document.getElementById("nav"); var mySelect = document.getElementById("mySelect"); var selectOption = function(index) { return function() { mySelect.children[index].selected = 'selected'; } } for (i = 0; i < nav.children.length; i++) { nav.children[i].addEventListener("click", selectOption(i)); }; 

 <select name="selectList" id="mySelect"> <option value="one">Home</option> <option value="two">About</option> <option value="three">Hobbies</option> <option value="four">Blog</option> <option value="five">Contact</option> </select> <nav> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> 

---

Another technique is to use the let keyword :

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

 var nav = document.getElementById("nav"); var mySelect = document.getElementById("mySelect"); for (i = 0; i < nav.children.length; i++) { let option = mySelect[i]; nav.children[i].addEventListener("click", function() { option.selected = 'selected'; }); }; 

 <select name="selectList" id="mySelect"> <option value="one">Home</option> <option value="two">About</option> <option value="three">Hobbies</option> <option value="four">Blog</option> <option value="five">Contact</option> </select> <nav> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> 

Answer 5

This uses a closure to preserve the intended value of i for each of the event listeners; and selectedIndex to set the select box option (which in this case is somewhat more convenient than setting the selected attribute on one of the <option> s.) It's otherwise identical to your code.

 var nav = document.getElementById("nav"); var mySelect = document.getElementById("mySelect"); for (i = 0; i < nav.children.length; i++) { (function(i) { // begin closure nav.children[i].addEventListener("click", function() { mySelect.selectedIndex = i; // easier way to set the selected option }); })(i); // end of the closure }; 

 <select name="selectList" id="mySelect"> <option value="one">Home</option> <option value="two">About</option> <option value="three">Hobbies</option> <option value="four">Blog</option> <option value="five">Contact</option> </select> <nav> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>