Clear selected option from a select with jQuery

0

I have a form with radio buttons, and when I select the radio buttons it will appear / hide the fields I want.

So much for beauty, but if I select an option on and then mute the radio button, that field will add, but does not clear the value chosen on it, so if you send the form, the value is passed, even the field being hidden.

Would anyone know how to clear the selected option from? I have tried with .empty() , but then it deletes all values from.

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 jQuery:

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

Thank you in advance!

#### EDITION

Follow the completed 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();
    }
  });
});
    
asked by anonymous 09.06.2017 / 15:29

2 answers

1

The way to delete the value of select 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('');
    }

  });
});
    
09.06.2017 / 15:30
0

If I understood your question well, you want to reset your <select> if it is so I'll 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><selectid="select">
  <option>Selecione</option>
  <option>Laranja</option>
  <option>Uva</option>
  <option>Goiaba</option>
</select>
<input type="button" value="limpar select" id="limpar">
    
09.06.2017 / 16:23