How to reset a selection menu (selectmenu) when changing another field using a function?

Question

I’m trying to make a "selection menu" (selectmenu) is reset when I enter a value by hand in a text field, but although I have tried numerous solution I searched here in Stack Overflow and other sites, none worked.

Below is my HTML code:

<div>
 <label>Selecione Um Prazo Padrão:</label>
</div>
<div>
  <select name="menuPrazo" id="menuPrazo" class="menuPrazo">
    <option value="*" selected="selected">Escolha um Tipo de Prazo</option>
    <option value="1">A Vista</option>
    <option value="30">Prazo Normal</option>
    <option value="15">Prazo Estendido</option>
</select>
</div>
<div>
<label>Ou Informe Um Prazo Personalizado:</label>
</div>
<div>
<input type="text" name="prazoManual" id="prazoManual" class="prazoManual" value=""></input>
</div>

Below the code in Javascript:

$(".menuPrazo").on("change", function () {
    $("#prazoManual").val("");
});

$(".prazoManual").on("change", function () {
  $('#menuPrazo').prop('selectedIndex',0);  
});

In addition to the option contained in the above code, I have tried the following options:

$("select#menuPrazo").selectmenu("index", 0);

or

$("#menuPrazo").val("");

or

$("#menuPrazo").refresh();

Jsfiddle

Answer 1

You forgot ". change()" when changing

    $("#prazoManual").on("change", function () {
      $('#menuPrazo').val('*').change();
    });

Answer 2

With the change event in both looks like this:

<script src="js/js_1.9/jquery-1.8.2.js" type="text/javascript"></script>        
<div>
 <label>Selecione Um Prazo Padrão:</label>
</div>
<div>
  <select name="menuPrazo" id="menuPrazo" class="menuPrazo">
    <option value="*" selected="selected">Escolha um Tipo de Prazo</option>
    <option value="1">A Vista</option>
    <option value="30">Prazo Normal</option>
    <option value="15">Prazo Estendido</option>
</select>
</div>
<div>
<label>Ou Informe Um Prazo Personalizado:</label>
</div>
<div>
<input type="text" name="prazoManual" id="prazoManual" class="prazoManual" value=""></input>
</div>

<script>
    $(".menuPrazo").on("change", function () {
        $("#prazoManual").val("");
    });

    $(".prazoManual").on("change", function () {
        $('#menuPrazo option:eq(0)').attr('selected','selected');  
    });
</script>

of course the correct is to create a button to "reset" and in this button you implement the event click on made these your changes ai.