Reset one dropdown if another dropdown selection changes

Question

I have tried these solutions: How to set the first option on a select box using jQuery?

These solutions aren't working for me I think because my form is different. I have two radio buttons, and based on which radio button was selected, a dropdown is shown. By default, both dropdowns are hidden ( style="display:none" ). To show and hide the dropdowns I am the following simple code:

$("#contactRadioButton").click(function () {
    $("#contactDropdown").show();
    $("#companyDropdown").hide();
});

$("#companyRadioButton").click(function () {
    $("#companyDropdown").show();
    $("#contactDropdown").hide();
});

One of the code samples I've tried:

$('#contactSelect').change(function(){
    $('#companySelect').val('');
});


$('#companySelect').change(function(){
    $('#contactSelect').val('');
});

But I need tonly one dropdown to be submitted with a value. Right now, I can click on the contact radio button and then select a value within the dropdown. Then, I can select the company radio button and the other dropdown will be displayed, and I can select a value. Then, both dropdowns will have a value.

PS. I am using bootstrap and bootstrap select. Not sure if that can have anything to do with it.

My full form code (radio buttons and dropdowns):

<div class="form-group">
    <label class="control-label">Add contact or company?</label>
    <div>
        <div class="radio-custom radio-success radio-inline">
            <input id="contactRadioButton" name="contact_relatie" type="radio" value="1">
            <label for="contactRadioButton">Contact</label>
        </div>
        <div class="radio-custom radio-success radio-inline">
            <input id="companyRadioButton" name="contact_relatie" type="radio" value="1">
            <label for="companyRadioButton">Company</label>
        </div>
    </div>
</div>

<div class="form-group " id="contactDropdown" style="display:none">
    <label for="name">Contact:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>

<div class="form-group " id="companyDropdown" style="display:none">
    <label for="name">Company:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>

Answer 1

JS

$('#contactSelect').change(function(){
     $('#companySelect option:first').prop('selected', 'selected');
});


$('#companySelect').change(function(){
    $('#contactSelect option:first').prop('selected', 'selected');
});

HTML

<div class="form-group " id="contactDropdown" style="display:none">
    <label for="name">Contact:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>

<div class="form-group " id="companyDropdown" style="display:none">
    <label for="name">Company:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>

Answer 2

Solved it by using this as well, since my code WAS working behind the scenes:

$('#mySelect').selectpicker('render');

https://github.com/silviomoreto/bootstrap-select/issues/84

So for anyone using the bootstrap select, use the above code if you're running into the same issue as me.