1

Boa tarde, Gostaria que me ajudassem no seguinte: Tenho 3 botões os quais abrem o mesmo MODAL, e dentro desse Modal tenho um Select com 4 opções: 0 por defeito, e mais 3 opções de 1 a 3, onde cada qual corresponde a um botão. O que pretendo é que quando se clica em qualquer um dos botões, abra o Modal e que o Select se actualize para o numero correspondente de cada botão, ou seja, se por exemplo clicar no botão 2 (b2), ao abrir o Modal ele actualize o select e ponha por defeito a opção 2, e o mesmo mas com os números correspondentes em relação ao botão 1 e 2.

Tento que isso aconteça usando esta solução em jQuery: $("#numbers[value=2]").attr("selected", "selected"); Mas infelizmente sem sucesso.

Este é o meu código completo, onde não há muito por onde enganar, pois o fiz de propósito para me poder expressar melhor:

<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <a class="waves-effect waves-light btn b1">button one</a>
  <a class="waves-effect waves-light btn b2">button two</a>
  <a class="waves-effect waves-light btn b3">button 333</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Header</h4>
      <div class="input-field col s12">
        <select id="numbers">
    <option value="0" selected>Choose your number</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">3333</option>
  </select>
        <label>Materialize Select</label>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Send</a>
    </div>
  </div>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

  <script>
    $('.modal').modal();
    $('select').material_select();
  </script>

  <script>
    $(".b1").click(function() {
      $('#modal1').modal('open');
      $("#numbers[value=1]").attr("selected", "selected");
    });

    $(".b2").click(function() {
      $('#modal1').modal('open');
      $("#numbers[value=2]").attr("selected", "selected");
    });

    $(".b3").click(function() {
      $('#modal1').modal('open');
      $("#numbers[value=3]").attr("selected", "selected");
    });
  </script>
</body>

</html>

O que é que estou fazendo mal? Grato pela vossa atenção. ~JC

1 Resposta 1

1

A solução encontra foi esta:

<script>
$('.modal').modal();
$('select').material_select();
</script>

<script>
$(".b1").click(function(){
$('#modal1').modal('open');
$("#numbers").val(1);
$("#numbers").material_select();
});

$(".b2").click(function(){
$('#modal1').modal('open');
$("#numbers").val(2);
$("#numbers").material_select();
});

$(".b3").click(function(){
$('#modal1').modal('open');
$("#numbers").val(3);
$("#numbers").material_select();
});
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .