Change Selection within a Select (form)

Asked

Viewed 49 times

1

Good afternoon, I’d like you to help me with this: I have 3 buttons that open the same MODAL, and inside this Modal I have a Select with 4 options: 0 by default, and 3 more options from 1 to 3, where each one corresponds to a button. What I want is that when you click on any of the buttons, open the Modal and Select updates to the corresponding number of each button, that is, if for example you click the button 2 (B2), when opening the Modal it updates the select and put the option 2 by default, and the same but with the corresponding numbers in relation to button 1 and 2.

I try to make it happen using this solution in jQuery: $("#numbers[value=2]").attr("selected", "selected"); But unfortunately without success.

This is my complete code, where there’s not much to fool about, because I did it on purpose to express myself better:

<!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>

What am I doing wrong? Thank you for your attention. ~JC

javascript jquery html

1 answer

1

The solution found was this:

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

Browser other questions tagged javascript jquery html

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