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

Asked

Viewed 171 times

1

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

2 answers

3

You forgot ". change()" when changing

    $("#prazoManual").on("change", function () {
      $('#menuPrazo').val('*').change();
    });
  • Perfect solution! At first it didn’t work in my code, although it worked correctly in Jsfiddle. After much breaking my mind I discovered that the reason for not working was the loading order of the libraries "Jquery", "Jquery UI" and "Jquery Mobile". When changing the loading order to this order I mentioned, everything worked correctly.

0

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.

  • I tried to implement your suggestion, but it’s not working ( http://jsfiddle.net/qete9dp6/4/ ). Any other ideas?

  • @Danielsilva I am not able to open the jsfiddle site, but I tested with html that you gave me and it worked, I just had to put a tag more related to jQuery, I will edit my reply and post everything

Browser other questions tagged

You are not signed in. Login or sign up in order to post.