Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Change Select Selected in Modal

Posted on 2017-08-16
4
High Priority
?
39 Views
Last Modified: 2017-08-16
Hi E's,
I Have 3 buttons and a Materialize Modal that contains a HTML Select with Four options to choose from. 0 by default and 1, 2, and 3, and each number between 1 to 3 are associated to each button.
The objective is, when I click in any button, open the Modal and change the select view for the correspondent number.
I try change the selected with jQuery in this way:
$("#numbers[value=3]").attr("selected", "selected");
but not work.
In attach image you can see what appear regardless of which button I click.Modal view
<!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>

Open in new window

The best regards, JC
0
Comment
Question by:Pedro Chagas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 59

Assisted Solution

by:Julian Hansen
Julian Hansen earned 3000 total points
ID: 42257252
Just do
$('#numbers').val(3);

Open in new window

0
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 3000 total points
ID: 42257260
You will need to re-initialise the material_select after doing 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>

Open in new window

Working sample here
1
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 42257283
Thank you.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42257378
You are welcome.
1

Featured Post

RHCE - Red Hat OpenStack Prep Course

This course will provide in-depth training so that students who currently hold the EX200 & EX210 certifications can sit for the EX310 exam. Students will learn how to deploy & manage a full Red Hat environment with Ceph block storage, & integrate Ceph into other OpenStack service

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This video teaches users how to migrate an existing Wordpress website to a new domain.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question