Change the Selection within a Select (form)

Question

Change the Selection within a Select (form)

Navigation

#1 by (1 votes)

1

Good afternoon, I would like you to help me with the following: I have 3 buttons which open the same MODAL, and within this Modal I have a Select with 4 options: 0 by default, and 3 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 that the Select is updated to the corresponding number of each button, that is, if for example click the button 2 (b2), when opening the Modal it update the select and default option 2, and the same but with the corresponding numbers in relation to button 1 and 2.

I try to make this happen using jQuery: $("#numbers[value=2]").attr("selected", "selected"); But unfortunately to no avail.

This is my complete code, where there is not much to cheat because I did it on purpose to be able 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><scriptsrc="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 html jquery

asked by anonymous 16.08.2017 / 17:41

1 answer

Automate button click [closed] What is the importance of the weak and unowned in swift?

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