jQuery: OnClick change option 'selected' attribute

Question

this would be my second post here, would be great if someone could support with his magic knowlegde :)

What I would like to achieve?

Changing the option I would like to remove attribute 'selected' from default and add to option I clicked.

This is my desired HTML:

<select class="flex-calc-length">
   <option value="6">1/2 year</option>
   <option value="12" selected>1 year</option>
   <option value="24">2 years</option>
   <option value="36">3 years</option>
   <option value="48">4 years</option>
   <option value="60">5 years</option>
</select>

But overall this is a part of materialize.css Select feature which adding a bunch of code, converting from above to:

<div class="select-wrapper flex-calc-length">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-3062497b-bc40-0e77-91c3-550f09e8e872" value="1 year">
<ul id="select-options-3062497b-bc40-0e77-91c3-550f09e8e872" class="dropdown-content select-dropdown" style="width: 215.2px; position: absolute; top: 0px; left: 0px; display: none; opacity: 1;">
    <li class=""><span>1/2 year</span></li>
    <li class=""><span>1 year</span></li>
    <li class="active selected"><span>2 years</span></li>
    <li class=""><span>3 years</span></li>
    <li class=""><span>4 years</span></li>
    <li class=""><span>5 years</span></li>
</ul>
<select class="flex-calc-length initialized" data-select-id="3062497b-bc40-0e77-91c3-550f09e8e872">
    <option value="6">1/2 year</option>
    <option value="12" selected="">1 year</option>
    <option value="24">2 years</option>
    <option value="36">3 years</option>
    <option value="48">4 years</option>
    <option value="60">5 years</option>
</select>
</div>

The browser will change the selected attribute automatically, no effort is required on your part. — Hayden Schiff
– Hayden Schiff, Commented Sep 25, 2017 at 23:13
Forgot to add, I am using this feature with materialize.css which is adding many lines of code to that. Somehow it's not changing by default. — sebastian sledz
– sebastian sledz, Commented Sep 25, 2017 at 23:18
How do you check the source code? View source, or with developer tools? — David
– David, Commented Sep 25, 2017 at 23:24

P.S. · Accepted Answer · 2017-09-25 23:56:40Z

2

Is it what you're trying to achieve?

let prevVal = $('.flex-calc-length').val();
function replaceSelection() {
  selectedVal = $('.flex-calc-length').val();
  
  $('.flex-calc-length > option').each(function(i, item) {
    if(item.value === prevVal) {
      $(item).removeAttr("selected");
    }
  })
  
  $('.flex-calc-length > option').each(function(i, item) {
    if(item.value === selectedVal) {
      $(item).attr("selected", "true");
      prevVal = $(item).val();
    }
  })
}

option[selected] {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="flex-calc-length" onchange="replaceSelection()">
   <option value="6">1/2 year</option>
   <option value="12" selected>1 year</option>
   <option value="24">2 years</option>
   <option value="36">3 years</option>
   <option value="48">4 years</option>
   <option value="60">5 years</option>
</select>

If you need an explanation - just ask.

answered Sep 25, 2017 at 23:56

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sebastian sledz Over a year ago

Many thanks for answer, this helped me to go further with whole idea.

Collectives™ on Stack Overflow

jQuery: OnClick change option 'selected' attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related