Javascript select option after change won't update when button is pressed

I’ve come up against some weird behaviour that I can’t seem to get working correctly. I have a book button where it would select the value from the dropdown which works fine. However the issues arises when the user decides to select something from the dropdown and then changes their mind and uses the button. The button then won’t update the changed value within the dropdown. I figured this had to do something with the selected behaviour being turned to true, I tried to loop through the options and set them to false but it didn’t fix the issue. Any advice?

JS

$(".book-btn").click(function (e) {
  e.stopPropagation();
  $('#id_CourseName :selected').attr('selected',false);
  var courseTitle = $(this).parent().parent().children(".course-title-ref")[0].innerText;
  $(`#id_CourseName option:contains(${courseTitle})`).attr('selected', true);
});

$(document).ready(function(e){
  $("#id_CourseName").change(function(e){
    for(let i=0 ; i<$('#id_CourseName').length; i++){
      $('#id_CourseName').eq(i).attr('selected',false);
      }

  })
})

Edit

For the HTML I’m using Django to render out the options of the dropdown

 <label for="">Service/Course</label>
 {{ form.CourseName }}

6 thoughts on “Javascript select option after change won't update when button is pressed”

  1. 728526 249484Nice 1, there is actually some excellent facts on this post some of my subscribers might uncover this useful, will send them a link, several thanks. 575344

    Reply
  2. Excellent weblog here! Also your web site quite a bit
    up very fast! What web host are you the use of? Can I am getting your affiliate hyperlink on your host?

    I desire my web site loaded up as quickly as yours lol

    Reply