I use materialize css for my project, I have problem when I want to append option in materialize select.
Please have a look at my snippet and make necessary changes to help me out.Thankyou
$(document).ready(function() {
$(".condition").click(function() {
$('.shw').append($('.hidden').clone().removeClass("hidden"));
});
});
$(document).ready(function() {
$(".delete").click(function() {
$('.hidden').remove();
});
});
.hidden {
display: none
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="hidden">
<fieldset>
<table class='addRuleHolder'>
<tr>
<td class="label-col">
<label>Sensor:</label>
</td>
<td>
<select>
<option value="1">S1</option>
<option value="2">S2</option>
</select>
</td>
</tr>
<tr>
<td class="label-col">
<label>Threshold Value:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
<button class="waves-effect waves-light btn delete" >delete</button>
</fieldset>
</div>
<div style="margin-top: 20px; float:right;padding-right:15px">
<button class="waves-effect waves-light btn condition" value="Add">condition</button>
</div>
<br style="clear:both"/>
<div class="shw"></div>
Thank you for your help,sorry for my bad English.
This is the working script for select
$(document).ready(function() {
$('select').attr("class", "browser-default")
});
To delete the div, below is the script
$('.shw').on('click', '.delete', function(e) {
e.preventDefault();
$(this).parent().remove();
});