Add an action to a <select>

Question

I have the following "type" button in the image, when I click it opens a dropdonw, when I click an item in the dropdonw opens a collapser with more options.

I need that when selecting the option in the dropdonw the text in the "type" button switches to the selected option and opens the collapser. When I click on the option it changes the text of the button but does not open the collapse, as in the example below

 <select class="input flex-iten-2 flex-margin dropdown btn btn-secondary dropdown-toggle" data-val=" true " data-val-required="Campo Assunto &#xE9; obrigat&#xF3;rio. " id="Assunto " name="Assunto "><option>Selecione</option>
                                              <option><a class="dropdown-item" href="#"> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                                               
                                            </button>    Tradutor</a> </option>   
                                          <option> <a class="dropdown-item" href="#">Afiliado</a></option>
                                          <option>   <a class="dropdown-item" href="#">Cartório </a></option>
                                          <option>   <a class="dropdown-item" href="#">Frete</a></option>
                                        
                                        </select>
                                        <div class="collapse" id="collapseExample2">
                                    <div class="card card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                    </div>
                                </div>
                                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
                                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer 1

In your script there is nothing causing Collapse to appear, so try this:

$('.selectAcao').on('change', function(){
  $('.collapse').collapse('show')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="input selectAcao flex-iten-2 flex-margin dropdown btn btn-secondary dropdown-toggle" data-val=" true " data-val-required="Campo Assunto &#xE9; obrigat&#xF3;rio. " id="Assunto " name="Assunto "><option>Selecione</option>
                                              <option><a class="dropdown-item" href="#"> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                                               
                                            </button>    Tradutor</a> </option>   
                                          <option> <a class="dropdown-item" href="#">Afiliado</a></option>
                                          <option>   <a class="dropdown-item" href="#">Cartório </a></option>
                                          <option>   <a class="dropdown-item" href="#">Frete</a></option>
                                        
                                        </select>
                                        <div class="collapse" id="collapseExample2">
                                    <div class="card card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                    </div>
                                </div>
                                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
                                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer 2

Have errors in your HTML:

id="Assunto " name="Assunto "

These spaces after Assunto in the id and in the name give difference in the time to manipulate them and will give problem. Remove them getting like this:

id="Assunto" name="Assunto"

Then just use the event change select to display the respective div. Each option must be related to a div by value equal to id of div. For example:

<option value="tradutor">Tradutor</option>

Selecting the above option will open the div with id tradutor.

Behold:

$("#Assunto").on("change", function(){
   $("div.collapse.show").removeClass("show"); // esconde os visíveis
   $("#"+this.value).collapse('show'); // mostra a div relacionada ao value do option selecionado
});

<select class="input flex-iten-2 flex-margin dropdown btn btn-secondary dropdown-toggle" data-val=" true " data-val-required="Campo Assunto &#xE9; obrigat&#xF3;rio. " id="Assunto" name="Assunto"><option>Selecione</option>
                                              <option value="tradutor">
                                               
                                            Tradutor </option>   
                                          <option value="afiliado">Afiliado</option>
                                          <option>Cartório</option>
                                          <option>Frete</option>
                                        
                                        </select>
                                        <div class="collapse" id="afiliado">
                                    <div class="card card-body">
                                        Afiliado
                                    </div>
                                </div>
<div class="collapse" id="tradutor">
                                    <div class="card card-body">
                                        Tradutor
                                    </div>
                                </div>
                                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
                                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>