I'm new to jQuery, and while my code does mostly what I want it to (in duplicating a form group), I'm having a couple of issues with the classes/values of the buttons:
When clicked, the .btnadd that is appended to the .formdupgroup loses it's value, rather than having a '+' symbol on it, it displays nothing.
2.When the duplicate .btnadd classes are changed to be .btnremove, they display the HTML entity as text on the button. Rather than a 'x' symbol, they read '×' in full.
I'm sure these issues are related to decoding the HTML entities in both cases, but I can't find a way to work around it, without resorting to just typing the unevenly spaced 'x' and '+' characters. How do I add a decoded HTML entity as the value on my inputs?
$(function(){
$(document).on('click','.btnadd',function(e){
e.preventDefault();
var controlForm = $(this).parents('.formdupgroup:first'),
currentEntry = $(this).parents('.toduplicate:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
newEntry.find('select').prop('selectedIndex',0);
controlForm.find('.btnadd:not(:last)')
.removeClass('btnadd').addClass('btnremove')
.removeClass('btn-success').addClass('btn-danger')
.val('×');
}).on('click','.btnremove', function(e){
$(this).parents('.toduplicate:first').remove();
e.preventDefault();
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
<form>
<div class='formdupgroup'>
<div class='form-row toduplicate'>
<div class='col-md-2'>
</div>
<div class='form-group col-md-8'>
<label for='selectexample' class='sr-only'>Select Example</label>
<select name='selectexample' class='form-control'>
<option value='' disabled selected>Please Select an Option</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
<option value='6'>Option 6</option>
<option value='7'>Option 7</option>
<option value='8'>Option 8</option>
<option value='9'>Option 9</option>
<option value='10'>Option 10</option>
</select>
</div>
<div class='col-md-2'>
<input type='button' class='btn btn-success btnadd' value='+'>
</div>
</div>
</div>
</form>
</div>
</script>
</body>
</html>
You don't need to escape + and × so you can just enter these directly into your function.
The reason the value is blank is because the val property is being reset by this line:
newEntry.find('input').val('');
Here's a working JSFiddle.
The reason .val('×'); Doesnt put an "x" in there is because javascript does not parse these html codes itself. You will need to specify that it has to be parsed.
Here is a working model to use html codes in javascript/jquery.
$(function(){
var parser = new DOMParser;
$(document).on('click','.btnadd',function(e){
e.preventDefault();
var controlForm = $(this).parents('.formdupgroup:first'),
currentEntry = $(this).parents('.toduplicate:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val(parser.parseFromString('+', 'text/html').body.textContent);
newEntry.find('select').prop('selectedIndex',0);
controlForm.find('.btnadd:not(:last)')
.removeClass('btnadd').addClass('btnremove')
.removeClass('btn-success').addClass('btn-danger')
.val(parser.parseFromString('×', 'text/html').body.textContent);
}).on('click','.btnremove', function(e){
$(this).parents('.toduplicate:first').remove();
e.preventDefault();
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
<form>
<div class='formdupgroup'>
<div class='form-row toduplicate'>
<div class='col-md-2'>
</div>
<div class='form-group col-md-8'>
<label for='selectexample' class='sr-only'>Select Example</label>
<select name='selectexample' class='form-control'>
<option value='' disabled selected>Please Select an Option</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
<option value='6'>Option 6</option>
<option value='7'>Option 7</option>
<option value='8'>Option 8</option>
<option value='9'>Option 9</option>
<option value='10'>Option 10</option>
</select>
</div>
<div class='col-md-2'>
<input type='button' class='btn btn-success btnadd' value='+'>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
This also works for html codes that dont apear on your keyboard. for example ♠
Related
My function below is logging one value to console instead of 2 values. Ultimately My project will have multiple select elements and I need to pass the value of each select element through a function.
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>
Javascript:
$("#logvalues").click(function() {
$("option:selected").each(function(){
console.log($("option:selected").val());
});
})
You just need to pass the current context using this like:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log( $(this).val() );
});
})
Demo:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log($(this).val());
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>
I'm trying to make a a webpage that has a conditional dropdown box using html and javascript. Say it's a certain day in the week like Monday I need a different dropdown box with different options when it's Thursday; however some days may have the same options. Originally I had two drop down box one when the person clicked what day it was and then the dropdown box would appear, but I was wondering if there was a way to do this automatically using a javascript function and also creating a function that only displays a certain dropdown list.
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>
If i understood your requirement correctly. This is what you are looking for using jquery
$("#QuestionOptions").change(function(){
$("#A,#B").hide();
if($(this).val() == "A"){
$("#A").show();
}else{
$("#B").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>
Check out my JSFidle. Most of code on javascript, remove some html element that doesn't needed.
With Dynamic options
var dynamic_options = {
'A': [{
value: "1",
text: "Option 1"
}, {
value: "2",
text: "Option 2"
}],
'B': [{
value: "3",
text: "Option 3"
}, {
value: "4",
text: "Option 4"
}]
};
$(function() {
var answers = $('#myAnswers').find('select');
$('#myQuestions').on('change', 'select', function(e) {
var options = dynamic_options[this.value] || [];
answers.find('option:gt(0)').remove();
$.each(options, function(i, option) {
answers.append($('<option>').prop(option));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myQuestions">
<select>
<option value=''>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div>
<p>Exapmle of question.</p>
</div>
<div>
<select>
<option value=''>Choose Your Answer</option>
</select>
</div>
</div>
BTW, to disable an option in select, use attribute disabled, whereas you have used disalbe.
The following code makes the option selected when the value is matched with the option value.
<html>
<head></head>
<body>
<label>Quantity:</label><br><br>
<select name="qty" id="qty">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>
<script>
$(document).ready(function(){
$('#qty option[value={{ $qty }}]').attr('selected','selected');
});
</script>
</body>
</html>
I'm new in programming and JavaScript noob so I need you guys help.
I have 2 drop drown list and I am trying to manipulate one drop down list using another drop down list through the help of JavaScript. Both drop down list consists of time in hrs, start time and end time.
The drop down list looks like this
<!-- start time -->
<div id="start">
<p>Start time</p>
<select name="select1" id="select1" >
<option value="8:00">8:00</option>
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
</select>
</div>
<!--end time -->
<div id="end">
<p>End time</p>
<select name="select2" id="select2">
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
</select>
</div>
What I am trying to accomplish is to make sure the end time doesn't start before the start time, and also the start time to end time is a limit of 2 hours. Is there anyway of doing this using JavaScript? no matter how much I search I can't seem to find the solution in the internet.
edit, this is what my actual document looks like.
<head>
<!-- title -->
<title> Mycomputer </title>
<!-- css link -->
<link rel="stylesheet" type="text/css" href="second_page.css">
<!-- date picker -->
<meta charset="utf-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy',
minDate: 0, maxDate: 30, showButtonPanel: true});
});
</script>
</head>
<body>
<div id="greybackground">
<!-- banner image -->
<img src="images/banners.jpg" id="banner"/>
<!-- buttons -->
<form action="logout.php">
<input type="submit" value="logout" class="logout-button"/>
</form>
<form action="user.php">
<input type="submit" value="back" class="back-button"/>
</form>
<!-- headings -->
<div id="welcome">This is room <?php echo $g; ?></div>
<div id="box1"></div>
<div id="intro">1. Choose the computer you would like to book.</div>
<div id="chooseone">Please choose only one from the following computers:</div>
<div class="checkbox2">
<!-- form -->
<form action="final_page.php" method="POST">
<?php
// to connect to database
require("user_connection.php");
//if statement
if ($g == C450){
// checkbox populated with values from database
$r = mysqli_query($connect, "SELECT * FROM `C450`");
while ($line = mysqli_fetch_assoc($r)) {
echo '<input type="radio" name="bike"
value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>';
}
}
?>
</div>
<div class="checkbox2">
<?php
// to connect to database
require("user_connection.php");
//if statement
if ($g == E300){
// checkbox populated with values from database
$s = mysqli_query($connect, "SELECT * FROM `E300`");
while ($line = mysqli_fetch_assoc($s)) {
echo '<input type="radio" name="bike"
value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>';
}
}
?>
</div>
<div class="checkbox2">
<?php
// to connect to database
require("user_connection.php");
//if statement
if ($g == AL10){
// checkbox populated with values from database
$s = mysqli_query($connect, "SELECT * FROM `AL10`");
while ($line = mysqli_fetch_assoc($s)) {
echo '<input type="radio" name="bike"
value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>';
}
}
?>
</div>
<!-- Date -->
<div id="box2"></div>
<div id="date">2. Choose a single date you would like to book the room on.</div>
<div id="groupdate">
<div id="nametag">Date:</div>
<div id="dateS"><input type="text" id="datepicker" name="datepicker"></div>
</div>
<!-- Time -->
<div id="box3"></div>
<div id="time">3. Select the preferred start time.</div>
<div id="grouptime">
<!-- start time -->
<script>
$('#select1').on('change', function() {
if($(this).val() > $('#select2').val())
$('#select2').val($(this).val());
$('#select2 option').each(function() {
if($(this).attr('value') < $('#select1').val())
{
$(this).hide();
}
else
$(this).show();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="start">
<p>Start time</p>
<select name="select1" id="select1" >
<option value="8:00">8:00</option>
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
</select>
</div>
<!--end time -->
<div id="end">
<p>End time</p>
<select name="select2" id="select2">
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
</select>
</div>
</div>
<div id="box4"></div>
<div id="review"><p>Please review your booking before saving to make sure there are no </br>accidental error.</p></div>
<input type="submit" id="save" name="next" Value="save" class="save"/>
</form>
<footer>
<p>Copyright © 2016 MyComputer | Contact information: gurungmadan#hotmail.com</p>
</footer>
</div>
</body>
Use the onchange event on select1 and select2 to trigger when the user change the value of them.
http://www.w3schools.com/jsref/event_onchange.asp
Then write a function which checks the values of each select
var select1 = document.getElementById("select1").value;
var select2 = document.getElementById("select2").value;
You can use regex for example to separe the hours and the minutes in order to compare them: http://www.w3schools.com/jsref/jsref_obj_regexp.asp
You can might want to use Date Object to compare them: http://www.w3schools.com/jsref/jsref_obj_date.asp but this is only an option, in your case I would just compare the hours, then if needed the minutes.
There are many ways to do what you want to do :)
One example using strict Javascript:
function check(elt) {
var select1 = document.getElementById("select1").value;
var select2 = document.getElementById("select2").value;
var regex = /([8-9]|10):([03]0)/;
var match1 = regex.exec(select1);
var match2 = regex.exec(select2);
var hours1 = match1[1];
var hours2 = match2[1];
if(hours1 >= hours2) {
var minutes1 = match1[2];
var minutes2 = match2[2];
if(minutes1 >= minutes2) {
// do the changes you want here
alert("Start time should be before End time!");
}
}
}
Quick snippet, mark the added leading 0 to the value to make the time strings comparable.
You do need to adjust the code a little according to your html code and the desired functionality. You probably should exchange the very simplistic conditions with something more sophisticated.
$(document).ready(function() {
$('#select1').on('change', function() {
if($(this).val() > $('#select2').val())
$('#select2').val($(this).val());
$('#select2 option').each(function() {
if($(this).attr('value') < $('#select1').val())
{
$(this).hide();
}
else
$(this).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="start">
<p>Start time</p>
<select name="select1" id="select1" >
<option value="08:00">8:00</option>
<option value="08:30">8:30</option>
<option value="09:00">9:00</option>
<option value="09:30">9:30</option>
</select>
</div>
<!--end time -->
<div id="end">
<p>End time</p>
<select name="select2" id="select2">
<option value="08:30">8:30</option>
<option value="09:00">9:00</option>
<option value="09:30">9:30</option>
<option value="10:00">10:00</option>
</select>
</div>
I am trying to use select field in materialize css. But it doesn't seems work properly
my code :
<div class="container">
<div class="row">
<div class="input-field s6">
<label >OS Version</label>
<select class="validate">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
And in this it is rendering a select field but label is still overlapping the select field. as shown in figure:
from http://materializecss.com/forms.html i have inspected where i founf this :
<div class="select-wrapper">
<span class="caret">▼</span>
<input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
<ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content select-dropdown">
<li class="disabled"><span>Choose your option</span></li>
<li class=""><span>Option 1</span></li>
<li class=""><span>Option 2</span></li>
<li class=""><span>Option 3</span></li>
</ul>
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
and from my code i am getting this from inspect:
<div class="select-wrapper">
<span class="select-dropdown " data-activates="select-options-fdd5c3a3-b6d7-07f2-6626-df40620c20cc">Choose your option</span>
<select class="validate initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Missing UL element is rendering below all the div, which mean above my footer.. where i am going wrong?
Fiddle : https://jsfiddle.net/007zkvut/
I updated your jsfiddle because it was loading Materialize before jQuery, so $() was not defined.
Here is the link:
https://jsfiddle.net/007zkvut/7/
It is working properly, just like in their website.
However, looking at the code you posted in your question and the code in your jsfiddle, there is a difference in the placement of <label>
In my updated jsfiddle I put another select to illustrate the difference between the different <label> placements. Just make sure it is after <select>
I have fixed the issues of select drop-down.
Please check the demo.
https://jsfiddle.net/007zkvut/9/
Your demo:
https://jsfiddle.net/007zkvut/8/
$(document).ready(function() {
$('select').material_select();
});
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-field s6">
<select class="browser-default waves-effect waves-light btn">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
I experienced this problem too because my view was autogenerating from the javascript code. I solved this by calling the select() function from a setTimeout and after the code that generates the select DOM and it worked.
setTimeout(function(){$('select').material_select();},1000);
This same trick will also work for the materialize datepicker. just do.
setTimeout(function(){$('.datepicker').pickadate();},2000)
Well you can use the following code:
<div class="input-field col s12 m6">
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
and, in your javascript file you need to put the next code:
(function($){
$(function(){
$(document).ready(function() {
$('select').material_select();
});
});
})(jQuery);
and ta chan!, it works.
Place the label after the select tag. It should do the trick.
I have a page that has to have multiple select boxes if needed. I'm using this plugin to style the selectbox.
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('.add_title_option .controls').html());
});
This is my javascript that I "clone" the selectbox and add it after it.
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<select id="title" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
<a href="javascript:false;" class="add_option add_title">
<img src="<?=base_url();?>assets/img/add_options.png" alt="" />
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
It does "clone" itselfs, but the select is not functional.
How should I do it to add multiple selects through javascript?
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('#title').clone());
});
You need to use
$('.add_title_option').after($('.selectContainer select').clone().show());
Insted of
$('.add_title_option').after($('.add_title_option .controls').html());
In order to clone it, and set display from none to show.
Then you have to transform your select box with .selectBoxIt()
To customize it with this plugin.
Also, I have removed the id from select box to be sure we will not have dublicated ids.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
$(".titleSelect").selectBoxIt();
$('body').on('click', '#dublicateButton', function() {
$('.add_title_option').after($('.selectContainer select').clone().show().selectBoxIt());
});
});
</script>
</head>
<body>
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<div class="selectContainer" >
<select class="titleSelect" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
</div>
<a href="javascript:void(null);" id="dublicateButton" class="add_option add_title">
click
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
</body>
</html>