I am trying to keep the values selected after form submission, when the user selects more than one value is should still be selected after the submit button has been clicked.
<?php
$example = $_POST["name1"];
?>
<form action="" method="post">
<select id="id1" name="name1" class="selectpicker" title="Select Currencies" multiple="multiple">
<option <?php if (isset($example) && $example=="a") echo "selected";?>>A</option>
<option <?php if (isset($example) && $example=="b") echo "selected";?>>B</option>
<option <?php if (isset($example) && $example=="c") echo "selected";?>>C</option>
</select>
<button name="submit" type="submit" value="Submit">SUBMIT</button>
</form>
<script>
$('#id1').on('change', function() {
var values = $(this).val()
$("#id2 option").hide() //hide all options
$('#id2').selectpicker('deselectAll') //if want to remove all selcted optn
if (values.length > 0) {
for (var i = 0; i < values.length; i++) {
//show where value is same..
$("#id2 option[value=" + values[i] + "]").show()
}
} else {
$("#id2 option").show() //show all options
}
$('#id2').selectpicker('refresh'); //refresh selctpicker
});
</script>
Use pure JS
var options = document.getElementById('id1').options;
for (let i = 0; i < options.length; i++) {
console.log(options[i].value);//log the value
}$("#id1 option").each(function(){
var thisOptionValue=$(this).val();
});