Clear selected option from a select with jQuery

Asked

Viewed 2,339 times

0

I am with a form with radio Buttons, and when I select the radio Buttons it will appear/ hiding the fields I want.

So far so great, but if I select an option on and then change radio button, that field disappears, but it doesn’t clear the chosen value on it, then if I send the form, the value is passed, even if the field is hidden.

Would anyone know how to clear the selected ? I’ve tried with .empty(), but then he erases all the values of .

form:

<div class="form-group" id="gr-003">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Vencimento da 1ª parcela <small><b>(dia)</b></small> <span class="required">*</span></small></label>
<div class="col-md-3 col-sm-3 col-xs-12">
    <select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field3"  name="custom_field[account][3]">
        <option value="" id="vazio"></option>
            <?php
                $b = array(5,15); //  ######## DIAS PARA PAGAMENTO
                foreach($b as $key => $value){
            ?>
        <option value="<?php echo $value;?>" <?php if($value == $vvencimento){ echo ' selected="selected"'; } ?> ><?php echo $value;?></option>
            <?php } ?>
    </select>
</div>

And the jQuery:

if (this.checked && this.value == '3') {
$("#gr-004").show();
$("#gr-002").hide();
$("#gr-003").hide();
$("#select-custom-field3").empty().append("#gr-003");

Thanks in advance!

#### EDITION

Follow the complete form:

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Forma de pagamento <span class="required">*</span></label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-1" value="1" <?php echo ($vformapagamento == '1')?'checked':'';?> > Boleto Conta Um
    <br />
    <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-2" value="2" <?php echo ($vformapagamento == '2')?'checked':'';?> > Cartão Conta Um
    <br />
    <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-3" value="3" <?php echo ($vformapagamento == '3')?'checked':'';?> > Espécie <small><b>(R$)</b></small>
    <br />
    <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-4" value="4" <?php echo ($vformapagamento == '4')?'checked':'';?> > Depósito/Transferência
    <br />
    <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-5" value="5" <?php echo ($vformapagamento == '5')?'checked':'';?> > Cheque
    <br />
  </div>
</div>

<div class="form-group" id="gr-002">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Qtde. Parcelas <span class="required">*</span><br><small>Caso seja pagamento à vista, selecione 1</small> </small></label>
  <div class="col-md-3 col-sm-3 col-xs-12">
    <select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field2"  name="custom_field[account][2]">
      <option></option>
      <?php
        for($a=1; $a<=12; $a++){
      ?>
      <option value="<?php echo $a;?>" <?php if($a == $vqtdeparcelas){ echo ' selected="selected"'; } ?> ><?php echo $a;?></option>
      <?php } ?>
    </select>
  </div>
</div>


<div class="form-group" id="gr-003">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Vencimento da 1ª parcela <small><b>(dia)</b></small> <span class="required">*</span></small></label>
  <div class="col-md-3 col-sm-3 col-xs-12">
    <select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field3"  name="custom_field[account][3]">
      <option value="" id="vazio"></option>
      <?php
        $b = array(5,15); //  ######## DIAS PARA PAGAMENTO
        foreach($b as $key => $value){
      ?>
      <option value="<?php echo $value;?>" <?php if($value == $vvencimento){ echo ' selected="selected"'; } ?> ><?php echo $value;?></option>
      <?php } ?>
    </select>
  </div>
</div>

<div class="form-group" id="gr-004">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Data do recebimento<span class="required">*</span></label>
  <div class="col-md-3 col-sm-3 col-xs-12">
    <input type="text" class="form-control col-md-7 col-xs-12 forma" name="custom_field[account][4]" id="input-custom-field4" value="<?php echo $vdatarecebimento; ?>" data-inputmask="'mask' : '99/99/9999'">
    <br>
  </div>
</div>

And the full jQuery:

$(document).ready(function() {
  $("#gr-002").hide();
  $("#gr-003").hide();
  $("#gr-004").hide();

  $('input:radio[name="custom_field[account][1]"]').on("change", function() {
    if (this.checked && this.value == '1') {
      $("#gr-002").show();
      $("#gr-003").show();
      $("#gr-004").hide();
    } if (this.checked && this.value == '2') {
      $("#gr-002").show();
      $("#gr-003").show();
      $("#gr-004").hide();
    } if (this.checked && this.value == '3') {
      $("#gr-004").show();
      $("#gr-002").hide();
      $("#gr-003").hide();
      $("#select-custom-field3").val('');
    } if (this.checked && this.value == '4') {
      $("#gr-004").show();
      $("#gr-002").hide();
      $("#gr-003").hide();
    } if (this.checked && this.value == '5') {
      $("#gr-002").show();
      $("#gr-003").show();
      $("#gr-004").hide();
    }
  });
});
javascript jquery html-select html-option

  • I gave an answer to your question but I was curious about the idea of .append("#gr-003");?

  • I was only trying with Empty(), but I saw in a forum a guy saying to use the append, so I tried to use ^^

  • You can show the rendered HTML and JS. So I can help you organize/simplify this code.

  • I edited the question and put the form and the full jquery

  • Then each custom_field[account][1] has a form-group that may have a select or an input, is that it? and when a custom_field[account][1] be chosen only 1 form-group should be visible right?

  • It will only be visible if the chosen radio is of value 3 or 4. Until then in hide/ appear the fields ta beauty, the problem is that if I fill a field, and after filled, hide it, then if I put to appear this field again, It will still be filled. And what I want is that when I hide the field, it erases its value

  • I edited the answer, take a look.

Show 2 more comments

2 answers

2

The way to delete the select value is to use .val('').

So your code can be:

$(document).ready(function() {
  $("#gr-002").hide();
  $("#gr-003").hide();
  $("#gr-004").hide();

  $('input:radio[name="custom_field[account][1]"]').on("change", function() {

    if (this.value == '1' || this.value == '2' || this.value == '5') {
      $("#gr-002, #gr-003").show();
      $("#gr-004").hide();
    } else {
      $("#gr-004").show();
      $("#gr-002, #gr-003").hide();
      $("#select-custom-field3").val('');
    }

  });
});

  • Thanks for the reply, but with val('') had already tried and it does not erase from the selected value, when I go back to select, the value is still selected

  • I’m a beginner with jquery, so just to let you know I did it right. #gr-003 is the div to hide, and #select-custom-field3 is the select id. That’s right?

  • @Gabriel #gr-002 and #gr-003 will be hidden. Take a look here: https://jsfiddle.net/9yfn540j/

  • What I need is to clear the value when the field is hidden, not when a button is clicked. I don’t understand why . val('') does not work :/

  • The problem must be outside jquery, this example also did not work -_-

  • @Gabriel copies all of this HTML and makes a jsFiddle. So you can see the isolated problem and it will be easy to solve.

Show 1 more comment

1

If I understand your question correctly you want to reset your <select> if so I will create an example below.

jQuery(document).ready(function(){

  jQuery('#limpar').click(function(){
    jQuery('#select').prop('selectedIndex',0);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option>Selecione</option>
  <option>Laranja</option>
  <option>Uva</option>
  <option>Goiaba</option>
</select>
<input type="button" value="limpar select" id="limpar">

Browser other questions tagged javascript jquery html-select html-option

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