I have a problem after I used the niceSelect. Before this I just use simple Javascript to show and hide table. Before I used the niceSelect it works fine because the value is just value. But after I used niceSelect the value element inside the select option become data-value
HTML:
<select class="wide" id="selectTbl">
<option value="0" selected>Select</option>
<option value="1">Admin</option>
<option value="2">Mechanic</option>
<option value="3">User</option>
<option value="4">Business</option>
</select>
Javascript:
document.getElementById('selectTbl').addEventListener('change', function () {
$("#selectTbl").val();
var style = $(this).val() == 1 ? 'block' : 'none';
document.getElementById('TblAdmin').style.display = style;
var style = $(this).val() == 2 ? 'block' : 'none';
document.getElementById('TblMech').style.display = style;
var style = $(this).val() == 3 ? 'block' : 'none';
document.getElementById('TblUser').style.display = style;
var style = $(this).val() == 4 ? 'block' : 'none';
document.getElementById('TblBiz').style.display = style;
});
Can someone help for me?
Here I want to display the div which is TblAdmin, TblMech, TblUser, TblBiz. I'm currently using NiceSelect but inside the select dropdown it has data value attribute. It actually not select but list-item inside unordered-list.
Like picture shown here, https://drive.google.com/file/d/1VyHDMb1Gl4PYBe19XZt1Z8Z-2OLAS1mx/view?usp=sharing
Ok, I see the issue. "change" doesn't work because it's no longer a normal 'select'. You have to detect clicks and then check the value.
But I suggest you don't use this library, it seems abandoned and it's very limited, not enough methods. Also jquery is not very used nowdays.
But if you want to use the library you could do something like:
$(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function() {
let val = $("#selectTbl").val()
var style = val == 1 ? 'block' : 'none';
document.getElementById('TblAdmin').style.display = style;
var style = val == 2 ? 'block' : 'none';
document.getElementById('TblMech').style.display = style;
var style = val == 3 ? 'block' : 'none';
document.getElementById('TblUser').style.display = style;
var style = val == 4 ? 'block' : 'none';
document.getElementById('TblBiz').style.display = style;
})
// NiceSelect plugin
$(document).ready(function(){
$('#selectTbl').niceSelect();
});
document.getElementById('selectTbl').addEventListener('change', function () {
$("#selectTbl").val();
var style = $(this).val() == 1 ? 'block' : 'none';
document.getElementById('TblAdmin').style.display = style;
var style = $(this).val() == 2 ? 'block' : 'none';
document.getElementById('TblMech').style.display = style;
var style = $(this).val() == 3 ? 'block' : 'none';
document.getElementById('TblUser').style.display = style;
var style = $(this).val() == 4 ? 'block' : 'none';
document.getElementById('TblBiz').style.display = style;
});
Is this correct? @madprops