xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">7
<meta http-equiv="x-ua-compatible" content="ie=edge">8
9
<!-- Font Awesome -->10
<link href="../lib/fontawesome-free-5.8.2-web/css/all.min.css" rel="stylesheet">11
12
<!-- Bootstrap core CSS -->13
<link href="../lib/MDB-Pro_4.8.10/css/bootstrap.min.css" rel="stylesheet">14
15
<!-- Material Design Bootstrap -->16
<link href="../lib/MDB-Pro_4.8.10/css/mdb.min.css" rel="stylesheet">17
18
<title>Select error</title>19
</head>20
21
<body>22
<div class="container-fluid">23
<div class="row"> 24
<div class="col-3">25
<!-- Begin draw by: drawSelectControl -->26
<select class="mdb-select md-form colorful-select dropdown-primary" id="select4-select" name="select4">27
<option value="" disabled selected>Select...</option>28
<option value="1">Select 4, option 1</option>29
<option value="2">Select 4, option 2</option>30
<option value="3">Select 4, option 3</option>31
<option value="4">Select 4, option 4</option>32
</select>33
<label class="mdb-main-label" id="select4-label" for="select4-select">Select 4</label>34
<!-- End draw by: drawSelectControl -->35
</div>36
</div>37
<div class="row">38
<div class="col-3">39
<button type="button" class="btn btn-primary" id="selectValue2-button">Select value 2 in select 4</button>40
</div>41
</div>42
</div>43
44
<!-- JQuery -->45
<script type="text/javascript" src="../lib/MDB-Pro_4.8.10/js/jquery-3.4.1.min.js"></script>46
47
<!-- Bootstrap tooltips -->48
<script type="text/javascript" src="../lib/MDB-Pro_4.8.10/js/popper.min.js"></script>49
50
<!-- Bootstrap core JavaScript -->51
<script type="text/javascript" src="../lib/MDB-Pro_4.8.10/js/bootstrap.min.js"></script>52
53
<!-- MDB core JavaScript -->54
<script type="text/javascript" src="../lib/MDB-Pro_4.8.10/js/mdb.min.js"></script>55
56
</body>1
1
xxxxxxxxxx1
<script type="text/javascript">2
$(document).ready(function () {3
$('.mdb-select').materialSelect(); 4
})5
6
$('#selectValue2-button').click(function() {7
$('#select4-select option:selected').prop('selected', false); // clear previously selected value8
$('#select4-select option[value="2"]').prop('selected', true); // Select value = 29
console.log('Selected value: ' + $('#select4-select').val()); // Check that value 2 is selected10
$('.mdb-select').materialSelect({ destroy: true }); 11
$('.mdb-select').materialSelect({});12
})13
</script> Console errors: 0