Change the contents of a label of an optgroup when selecting an option in another select

Question

Change the contents of a label of an optgroup when selecting an option in another select

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I would like, by clicking, for example in the "10 People" option ...

Hechangedthelabelofseveralotherselects,forexample,thisone:"Special Fillings: R $ 10". I would like it, for example, to become "Special Fillings: $ 20". When I chose "30 People", change to "Special Feeds: $ 40."

Here's a part of my code: (I'm using the select2 plugin, but I do not know if it's relevant to this question)

I think it's a VERY SIMILAR solution to this one, but instead of changing the content of <div> , change that to <optgroup label=""> : Link to similar solution

<form class="form" method='post' id='formBoloMesa' action="custom_includes/orderBolo.php">

<div class="form-group">
    <span class="resume-subtitle">Escolha o tamanho</span>
    <select name="tamanho" class="form-control select2-list select-options-1" data-placeholder="Clique aqui para escolher" multiple>
        <optgroup label="Tamanho">
            <?php
                include ('custom_includes/connect.php');
                $strTamanho = "SELECT * FROM bolo_mesa_itens WHERE tipo='tamanho'";

                $rsTamanho = mysql_query($strTamanho);

                while($rowTamanho = mysql_fetch_array($rsTamanho)) {
                    echo '<option value="' . $rowTamanho['nome'] . '">' . $rowTamanho['nome'] . '</option>';
                } 
            ?>      
        </optgroup>                                                 
    </select>
</div>

<div class="form-group">
    <span class="resume-subtitle">
        Escolha o modelo
    </span>
    <select name="modelo" class="form-control select2-list select-options-1" data-placeholder="Clique aqui para escolher" multiple>
    <optgroup label="Tipo de Bolo">
    <?php
        $strModelo = "SELECT * FROM bolo_mesa_itens WHERE tipo='modelo'";

        $rsModelo = mysql_query($strModelo);

        while($rowModelo = mysql_fetch_array($rsModelo)) {
            echo '<option value="' . $rowModelo['nome'] . '">' . $rowModelo['nome'] . '</option>';
        }
    ?>
    </select>
</div>

<div class="form-group">
    <span class="resume-subtitle">Escolha a Massa</span>
    <select name="massa" class="form-control select2-list select-options-1" data-placeholder="Clique aqui para escolher" multiple>
        <optgroup label="Massas">
        <?php
            $strMassas = "SELECT * FROM bolo_mesa_itens WHERE tipo='massa'";

            $rsMassas = mysql_query($strMassas);

            while($rowMassas = mysql_fetch_array($rsMassas)) {

                echo '<option value="' . $rowMassas['nome'] . '">' . $rowMassas['nome'] . '</option>';

            }
        ?>
        </optgroup>                                         
    </select>
</div>

<div class="form-group">
    <span class="resume-subtitle">Escolha 3 recheios</span>
    <select name="recheio1" class="form-control select2-list select-options-1" data-placeholder="Escolha o 1º Recheio" multiple>
        <optgroup label="Recheios Comuns">
            <?php
                $strRecheios = "SELECT * FROM bolo_mesa_itens WHERE tipo='recheio'";

                $rsRecheios = mysql_query($strRecheios);

                while($rowRecheios = mysql_fetch_array($rsRecheios)) {
                    echo '<option value="' . $rowRecheios['nome'] . '">' . $rowRecheios['nome'] . '</option>';
                }
            ?>  
        </optgroup>
        <optgroup label="Recheios Especiais (+R$10)">
            <?php
                $strRecheiosPremium = "SELECT * FROM bolo_mesa_itens WHERE tipo='recheio' AND premium='1'";

                $rsRecheiosPremium = mysql_query($strRecheiosPremium);

                while($rowRecheiosPremium = mysql_fetch_array($rsRecheiosPremium)) {
                    echo '<option value="' . $rowRecheiosPremium['nome'] . '">' . $rowRecheiosPremium['nome'] . '</option>';
                }
            ?>
        </optgroup>                                                 
    </select>

jquery html-select jquery-select2

asked by anonymous 10.02.2017 / 17:19

2 answers

0

ONCHANGE-BASED CHANGE

A function activated in onChange can be manipulated as follows:

function mudar(val){
  document.getElementById("mudar").label = "Novo Tipo de Bolo "+val;
}

<p><select onchange="mudar(this.value)">
  <option value='1'>Opção 1</option>
  <option value='2'>Opção 2</option>
  <option value='3'>Opção 3</option>
  <option value='4'>Opção 4</option>
  <option value='5'>Opção 5</option>
</select></p>

<p><select>
  <optgroup id="mudar" label="Tipo de Bolo">
  <option value='1'>Bolo 1</option>
  <option value='1'>Bolo 1</option>
  <option value='1'>Bolo 1</option>
  <option value='1'>Bolo 1</option>
  <option value='1'>Bolo 1</option>
</select></p>

10.02.2017 / 18:04

Always return to the top of the screen when clicking on links from a SPA with Angular.Js argument out of range exception was unhandled

score 1 · Accepted Answer

Try using jQuery. Add a class to optgroup and try changing the label in the change event of the selection field.

html

<optgroup class="grupoRecheio" label="Recheios Especiais: R$10">

js

$(document).ready(function () {
  $('select[name=tamanho]').change(function () {
    var selectRecheioGroup = $('select[name=recheio1] .grupoRecheio');
    var tamanhoSelecionado = $(this).val();

    if (tamanhoSelecionado == 'Tamanho1') {
      selectRecheioGroup.attr('label', 'Recheios Especiais: R$20');
    } else if (tamanhoSelecionado == 'Tamanho2') {
      selectRecheioGroup.attr('label', 'Recheios Especiais: R$30');
    }
    // ...
  });
});