jQuery removing set select option selected not removing

Question

I am trying to remove the default selected option in the HTML and set the first as selected, my jQuery seems to be setting the first option as selected fine but it's not appearing selected as it's not removing the original selected option. I have tried 2 methods which are below:

option 1

$('.ty-profile-field__select-state :selected').prop('selected', false);
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');

option 2

$('.ty-profile-field__select-state option').each(
    function() {
        $(this).removeAttr('selected');
    }
);
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');

option 3

$('.ty-profile-field__select-state').find('option:selected').removeAttr("selected");
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');

HTML from source

<select x-autocompletetype="state" id="elm_24" class="ty-profile-field__select-state cm-state cm-location-billing" name="user_data[b_state]">
    <option value="" selected="selected">- Select state -</option>
    <option value="ACT">Australian Capital Territory</option>
    <option value="NSW">New South Wales</option>
    <option value="NT">Northern Territory</option>
    <option value="QLD">Queensland</option>
    <option value="SA">South Australia</option>
    <option value="TAS">Tasmania</option>
    <option value="VIC" selected="">Victoria</option>
    <option value="WA">Western Australia</option>
</select>

You can see it's taking the first option and making selected for not removing the one that is initially set so it's not changing to the first.

Answer 1

Not sure, but you said you want to remove the default, leaving the next item as the selected item. This does that: https://jsfiddle.net/Twisty/um7xhx7m/1/

$(document).ready(function() {
  $('.ty-profile-field__select-state option:selected').remove();
});

Now if anything else is :selected when this page loads, it would be removed. So you could adjust to selecting just option[0] like so:

$(document).ready(function() {
  $('.ty-profile-field__select-state option:eq(0)').remove();
});

Answer 2

您可以尝试类似：

$(#elm_24).removeAttr('selected');

Answer 3

$('.ty-profile-field__select-state').val('');
$('.ty-profile-field__select-state option:first').prop('selected', true);
$('.ty-profile-field__select-state option').each(function() { $(this).prop('selected', false); });
$(".ty-profile-field__select-state option:first").prop('selected', true);
$('.ty-profile-field__select-state').find('option:selected').prop('selected', false);
enter code here

Answer 4

Turned out what methods i was doing was fine but i needed to wrap in

$(window).load(function(){

As seems the option was being set after i was trying to set it

Answer 5

You can do it in this way.

    $(document).ready(function(){

      $(".ty-profile-field__select-state option").removeAttr('selected');

      $(".ty-profile-field__select-state option:nth-child(2)").attr('selected',true);//Australian Capital Territory

      $(".ty-profile-field__select-state option:first").attr('selected',true);//Select state 

    })

Here is the plunker

When you say option:first , it is first child that is Select state