Why is my select value not being reset? Problem with "selected" attr/prop

Question

var original_role = $('option:selected', '#user_role').val();

$('#role_cancel').click(function() {
//console.log(original_role);
  $('option:selected', '#user_role').removeAttr('selected'); //deselect current option
  $('#user_role').find('option[value="' + original_role + '"]').attr('selected'); //select original value
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <div class="col-md-9">
    <select name="user_role" class="form-control" id="user_role">
      <option value="0">Ninguno</option>
      <option value="1">Admin</option>
      <option value="24">Secretario general</option>
      <option value="25">SecretarioExcursiones</option>
      <option value="26">Tesorería</option>
      <option value="27">Almacen</option>
      <option value="28">Coordinador</option>
      <option value="30">Reta</option>
      <option value="31">Invitado</option>
      <option value="32" selected="">Prospecto</option>
      <option value="33">Presidente</option>
      <option value="34">Eventos especiales</option>
      <option value="36">Guía</option>
      <option value="37">Soci@</option>
      <option value="38">Inivtado</option>
    </select>
  </div>
  
  <button id="role_cancel">
  RESET
  </button>
  
</div>

When pressing RESET, the select should

Remove selected attr/prop from whatever option in the dropdown was selected
Select the originally selected value from the dropdown (make the change visually and in DOM)

So far is doing none of this.

I think you linked to the wrong fiddle. It doesn't have any of that code. — Barmar, Jul 01 '20 at 19:45
But you should use `var original_role = $("#user_role").val();` Don't use the `selected` attribute, that's just for the initial selection, it's not used once the user has change the menu. — Barmar, Jul 01 '20 at 19:46
If you must use the `selected` *property*, use `.prop('selected', true)`. See [.prop() vs .attr()](https://stackoverflow.com/q/5874652/215552). — Heretic Monkey, Jul 01 '20 at 19:59
Does this answer your question? [.prop() vs .attr()](https://stackoverflow.com/questions/5874652/prop-vs-attr) — Heretic Monkey, Jul 01 '20 at 20:00
@Barmar is correct. I just had to use `original_role = $('#user_role').val();` and `$('#user_role').val(original_role )` to return to its original state — Zurupupz, Jul 01 '20 at 20:10
`.attr('selected')` <= is the getter form of `attr()`, not the setter form. — Taplar, Jul 01 '20 at 20:51

score 0 · Answer 1 · answered Jul 01 '20 at 19:57

Currently I set to react on button click not click on select, just replace it if you want, just think this was you initial intention.

You also need to fetch new_role, new selected item to be removed inside click function. And set it back to with original_role as Barmar said in comment.

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
})

var original_role = $('option:selected', '#user_role').val();
//console.log(original_role);

$('button').click(function() {
var new_role = $('option:selected', '#user_role').val();
    //console.log(new_role);
  $('#user_role option[value="'+new_role+'"]').remove();
  $("#user_role").val(original_role);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <div class="col-md-9">
    <select name="user_role" class="form-control" id="user_role">
      <option value="0">Ninguno</option>
      <option value="1">Admin</option>
      <option value="24">Secretario general</option>
      <option value="25">SecretarioExcursiones</option>
      <option value="26">Tesorería</option>
      <option value="27">Almacen</option>
      <option value="28">Coordinador</option>
      <option value="30">Reta</option>
      <option value="31">Invitado</option>
      <option value="32" selected="">Prospecto</option>
      <option value="33">Presidente</option>
      <option value="34">Eventos especiales</option>
      <option value="36">Guía</option>
      <option value="37">Soci@</option>
      <option value="38">Inivtado</option>
    </select>
  </div>
  
  <button>
  asd
  </button>
  
</div>

Why is my select value not being reset? Problem with "selected" attr/prop

1 Answers1