Question

I may be going about this the wrong way. I have a container of links and form options. When clicking on links it selects an option. In order to deselect the option if another is selected I need to iterate up the parent elements until a specific class and then remove the selected value for that option.

Here is some of the HTML.

<ul class="cssClass">
  <li><div class="first-elem">Select<span></span></div>
    <ul>
        <li><a href="#firstValue">First Value</a></li>
        <li><a href="#secondValue">Second Value</a></li>
    </ul>
  </li>
  <li>
    <select name="someSelect">
        <option value="">Select</option>
        <option value="firstValue">First Value</option>
        <option value="secondValue">Second Value</option>
    </select> 
  </li>
</ul>

Here is the start of the jQuery. Everything is working except my removeAttr part so I have excluded the rest.

$(".cssClass li a").click(function(e) {
  e.preventDefault();
    $(this).parentsUntil('.cssClass','option').removeAttr("selected");

But this is not working. Is there another way to do this?

Answer 1

The second argument of parentsUntil is to filter, not to make a selection query.
Better use this

 $(this).closest('.cssClass').find('option').removeAttr("selected");