0
181
Viewsclone select element and selected options are disabled
the scenario is when all the selected options are there. so, the option is disabled. but when I clone select options and then disable not show in options.
in the above image disabled options.
if I add clone select option button then option aland isands id enable
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<select data-placeholder="Choose a Country..." class="select_" id="select_cn" tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
<div class="apnd"></div>
<button class="clon">
BTN
</button>
<script>
$('body').on('click', '.clon', function () {
$('#select_cn').clone().insertBefore('.apnd')
})
$(document).ready(function () {
$(".select_").change(function () {
var value = $(this);
var prevVal = value.data("prev");
var otherSelects = $(".select_").not(this);
otherSelects.find('option[value="' + $(this).val() + '"]').attr('disabled', true);
if (prevVal) {
otherSelects.find('option[value="' + prevVal + '"]').attr('disabled', false);
}
value.data("prev", value.val());
});
});
</script>
</body>
</html>aland isands
·
Juan Pablo Isaza
Answer question