How do I change selected option based on different element in jQuery?-CodePudding

I'm trying to change the selected option of a select, based on clicking a fully different item, but the change is not actually working.

I have the following jQuery function

        $(".fake-label").click(function () {
            console.log(attribute[1]);
            $("#media_professions_select").val(attribute[1]).trigger('change');
        });

And the following HTML, but nothing happens. Attribute[1] is "Freelance Journalist"

                <select required id="media_professions_select">
                    <option disabled selected>Make a Choice</option>
                    <option value="Freelance Journalist">Freelance Journalist</option>
                </select>

I tried, .val(), with .trigger() and without. Also .attr("selected", true) does not do the trick.

CodePudding user response：

.val(value) should absolutely work if it's an exact match (spaces, case etc)

$(".fake-label").click(function() {
  let a = "Freelance Journalist"
  $("#media_professions_select").val(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='fake-label'>click</button>

<select required id="media_professions_select">
  <option disabled selected>Make a Choice</option>
  <option value="Freelance Journalist">Freelance Journalist</option>
</select>