I am new to any front end development and am currently writing an HTML view for my job using cshtml. I want to show and hide classes within this file using JQuery, and believe I have written a function to do so. When the initial selection is made, I want to show the class which corresponds to the option value. When a change is made, no class is shown. Here is my code:
#{
ViewBag.Title = "Editor";
}
<script>
var table = function () {
var t = document.getElementById('table');
var selection = t.options[t.selectedIndex].value;
if (selection == "emp") {
$("#emp").show();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "itm") {
$("#emp").hide();
$("#itm").show();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "ln") {
$("#emp").hide();
$("#itm").hide();
$("#ln").show();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "mo") {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").show();
$("#shft").hide();
$("#twi").hide();
} else if (selection == "shft") {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").show();
$("#twi").hide();
} else if (selection == "twi") {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").show();
} else {
$("#emp").hide();
$("#itm").hide();
$("#ln").hide();
$("#mo").hide();
$("#shft").hide();
$("#twi").hide();
}
}
</script>
<h2>Edits</h2>
<select id="table" name="table" onclick="table()">
<option value="0">Select a table to edit</option>
<option value="0"></option>
<option value="emp">Employee</option>
<option value="itm">Item</option>
<option value="ln">Line</option>
<option value="mo">MO</option>
<option value="shft">Shift</option>
<option value="twi">TWI</option>
</select>
<br /><br />
<span hidden class="emp">
<select name="empid" id="empid">
<option value="0">Select Employee</option>
#foreach (var emp in ViewBag.EMP)
{
<option value="#emp.EmployeeID">#emp.EmployeeName</option>
}
</select>
</span>
<span hidden class="itm">
<select name="itmid" id="itmid">
<option value="0">Select Item</option>
#foreach (var itm in ViewBag.ITM)
{
<option value="#itm.ItemID">#itm.ItemName</option>
}
</select>
</span>
<span hidden class="ln">
<select name="lnid" id="lnid">
<option value="0">Select Line</option>
#foreach (var ln in ViewBag.LN)
{
<option value="#ln.LineID">#ln.LineName</option>
}
</select>
</span>
<span hidden class="mo">
#{int count = 0;}
<select name="bch" id="bch">
<option value="0">Select MO</option>
#foreach (var mo in ViewBag.MO)
{
<option value="#mo.NBMO">#ViewBag.fullMO[count]</option>
count += 1;
}
</select>
</span>
<span hidden class="shft">
<select name="shftid" id="shftid">
<option value="0">Select Shift</option>
#foreach (var shft in ViewBag.SHFT)
{
<option value="#shft.ShiftID">#shft.ShiftCode</option>
}
</select>
</span>
<span hidden class="twi">
#{count = 0;}
<select name="tnum" id="tnum">
<option value="0">Select TWI</option>
#foreach (var twi in ViewBag.TWI)
{
<option value="#twi.TWINumber">#ViewBag.fullTWI[count]</option>
count += 1;
}
</select>
</span>
Elements can have multiple classes so give all the spans a common class. Allows you to hide the whole class in one line
Then use the value of the top selection to create a selector to match the one you want to show
You were using ID selectors to try to target classes. A class selector is prefixed with a dot.
$('#table').change(function() {
// `this` is the select element
var value = $(this).val();
// hide all the spans
$('.select-wrap').hide();
// don't show anything if value is zero
if (value !== '0') {
// using the classes you created on spans
var classSelector = '.' + value
$('.select-wrap' + classSelector).show();
// OR Using select ID and traverse to it's parent
// $('#' + value + 'id').parent().show()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Edits</h2>
<select id="table" name="table">
<option value="0">Select a table to edit</option>
<option value="emp">Employee</option>
<option value="itm">Item</option>
<option value="ln">Line</option>
<option value="mo">MO</option>
<option value="shft">Shift</option>
<option value="twi">TWI</option>
</select>
<br /><br />
<span hidden class="select-wrap emp">
<select name="empid" id="empid">
<option value="0">Select Employee</option>
#foreach (var emp in ViewBag.EMP)
{
<option value="#emp.EmployeeID">#emp.EmployeeName</option>
}
</select>
</span>
<span hidden class="select-wrap itm">
<select name="itmid" id="itmid">
<option value="0">Select Item</option>
#foreach (var itm in ViewBag.ITM)
{
<option value="#itm.ItemID">#itm.ItemName</option>
}
</select>
</span>
<span hidden class="select-wrap ln">
<select name="lnid" id="lnid">
<option value="0">Select Line</option>
#foreach (var ln in ViewBag.LN)
{
<option value="#ln.LineID">#ln.LineName</option>
}
</select>
</span>
<span hidden class="select-wrap mo">
#{int count = 0;}
<select name="bch" id="bch">
<option value="0">Select MO</option>
#foreach (var mo in ViewBag.MO)
{
<option value="#mo.NBMO">#ViewBag.fullMO[count]</option>
count += 1;
}
</select>
</span>
<span hidden class="select-wrap shft">
<select name="shftid" id="shftid">
<option value="0">Select Shift</option>
#foreach (var shft in ViewBag.SHFT)
{
<option value="#shft.ShiftID">#shft.ShiftCode</option>
}
</select>
</span>
<span hidden class="select-wrap twi">
#{count = 0;}
<select name="tnum" id="tnum">
<option value="0">Select TWI</option>
#foreach (var twi in ViewBag.TWI)
{
<option value="#twi.TWINumber">#ViewBag.fullTWI[count]</option>
count += 1;
}
</select>
</span>
You're using ID selectors rather than Class selectors. Try $(".emp").show() instead. Read more here.
Remember when accessing HTML elements using javascript or jquery, id’s can only be applied to one element while classes can be applied to multiple HTML elements.
Related
I had a challenge getting this question but tried to research and redo it.
I'm trying to get an item in a list from a controller, then iterate through the list. Based on the content of the array, I would like to show or hide the select that has options in it. I can't seem to hide or show any of them at the moment.
var names = ['marketing']; //or ['business']
var text = "";
var i;
//$(document).ready(function() {
for (i = 0; i < names.length; i++) {
if (names[i] === 'business') {
//alert('Hooray');
$("#business").show("slow");
$(".marketing").hide("fast");
} else
if (names[i] === 'marketing') {
$("#marketing").show("slow");
$(".marketing").hide("fast");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all" id="note">
Some content will be posted here...
</div>
<select id="marketing" multiple>
<option value="1">Definition</option>
<option value="2">Advertise</option>
<option value="3">Promotion</option>
</select>
<select id="business" multiple>
<option value="1">Definition</option>
<option value="2">Buy</option>
<option value="3">Sell</option>
</select>
If your array contains the exact name of the id you can "hide" the elements with CSS and show them with two lines of javascript
var names = ['marketing'];//or ['business']
names.forEach( name => {
$('#' + name).show('slow')
});
select {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all" id="note">
Some content will be posted here...
</div>
<select id="marketing" multiple>
<option value="1">Definition</option>
<option value="2">Advertise</option>
<option value="3">Promotion</option>
</select>
<select id="business" multiple>
<option value="1">Definition</option>
<option value="2">Buy</option>
<option value="3">Sell</option>
</select>
Is it possible to hide options in a select/dropdown with jQuery based on the user's selection from a previous dropdown e.g:
If user is 8 (Age Select/Dropdown), and chooses subject English (Subject Select/Dropdown) then hide Location 2 from (Locations dropdown)?
<select name="age">
<option value="8">8</div>
<option value="9">9</div>
<option value="10">10</div>
<option value="11">11</div>
</select>
<select name="subject">
<option value="eng">English</div>
<option value="maths">Maths</div>
<option value="science">Science</div>
</select>
<select name="subject">
<option value="loc-1">Location One</div>
<option value="loc-2">Location Two</div>
<option value="loc-3">Location Three</div>
</select>
Thank you!
you just need to add change function to your drop-down and according to your requirement you need to add your logic. see below example.
$(document).ready(function(){
$("#age").change(function(){
hideOption();
})
$("#subject").change(function(){
hideOption();
})
})
function hideOption(){
var age=$("#age").val();
var subject=$("#subject").val();
if(age==8 && subject=="Maths"){
$("#location [value='Location Two']").hide();
}
else{
$("#location [value='Location Two']").show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" id='age'>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<select name="subject" id='subject'>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
</select>
<select name="Location" id='location'>
<option value="Location One">Location One</option>
<option value="Location Two">Location Two</option>
<option value="Location Three">Location Three</option>
</select>
You can do something like below
$(document).on('change', '.age', function(e){
var val = $(this).val();
var subject = $('.subject').find(":selected").val();
if(val == 8 && subject == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
$(document).on('change', '.subject', function(e){
var age = $('.age').find(":selected").val();
var val = $(this).val();
if(age == 8 && val == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" class="age">
<option >select</8>
<option value="8">8</8>
<option value="9">9</8>
<option value="10">10</8>
<option value="11">11</8>
</select>
<select name="subject" class="subject">
<option value="English">English</8>
<option value="Maths">Maths</8>
<option value="Science">Science</8>
</select>
<select name="location" class="location">
<option value="One">Location One</8>
<option value="Two">Location Two</8>
<option value="Three">Location Three</8>
</select>
With jQuery you can use .hide() and .show() to toggle element visibility. First however, you can check if the value of a select (for example age) was changed. Based on the logic you want to have, you can for example check what the value of the change was and do something if it matches a condition.
For example:
$( "#age-select" ).change(function() {
var value = $(this).val();
if(value == 8) {
$("#location-two").hide();
} else {
$("#location-two").show();
}
});
However, notice that I added an id for the "Location Two" option ("location-two") and for the age select element. Also, to make this work properly, you have to fix the values so that they're not all 8 and fix the closing tags of the elements (not ).
I have 2 dropdowns - one for state, one for city. I want to make it so that, when the State dropdown is on the default selected value (--State--), the City dropdown is not even visible. But otherwise, as long as you select any of the states, the dropdown box will be there.
My current code is such that the 'City' options change depending on what 'State' you have selected. For reasons I don't understand, this JSFiddle isn't working, but it's working in Brackets. http://jsfiddle.net/a70zjg9p/4/
I just need help implementing:
if --State-- (default value) is selected, make City dropdown invisible
code on top of the code I already have.
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
See the comments in the logic below for details on what it is doing at each step.
$(document).ready(function() {
//get the cities and detach them, since state presumably starts
//as --State--
var $citySelect = $("#layout_select");
var $cities = $citySelect.children().detach();
$("#column_select").on('change', function(e) {
//remove any cities that were previously re-attached
$cities.detach();
if (e.target.value === 'col0') {
//col0 is --State--, hide the cities
$citySelect.hide();
} else {
//find all the cities for the state and re-attach them
$citySelect.append(
$cities.filter(function(){ return this.value === e.target.value })
);
//show the cities
$citySelect.show();
}
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
Check the selected value of the first select, if it is equal to col0, then hide the second select, if not, show it.
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function() {
var addoptarr = [];
var citySelect = $("#layout_select");
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
citySelect.html(addoptarr.join(''))
//CHECK IF IS EQUAL TO 'col0'
if (this.value == "col0"){
citySelect.hide();
}else{
citySelect.show();
}
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px; display: none">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
As you can see if (this.value == ...) I'm using this because in the current context (the change trigger of the element), this is equivalent to the element, in this case, the select
Just check the text of the selected option of the select and hide #layout_select if it is equal to "-- State --".
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$('#layout_select').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''));
if($('#column_select').find(":selected").text()=="-- State --"){
$('#layout_select').hide();
} else {
$('#layout_select').show();
}
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
if i have understood correctly, when the first option is selected (--State--), then the you need to hide the city dropdown...
in order to do that, you can use the following script:
http://jsfiddle.net/a70zjg9p/10/
$(document).ready(function() {
var $state = $("#column_select"),
$city = $("#layout_select");
$city.hide();
$state.on('change', function() {
if ($(this).val() == "col0") {
$city.hide();
} else {
$city.show();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;display:none">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
This works
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tut114</title>
<style type="text/css">
.Hide {
visibility: hidden;
}
</style>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var optarray = $("#layout_select").children('option').map(function () {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function () {
if ($('#column_select option:selected').text() != "-- State --") {
$("#layout_select").removeClass("Hide");
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}
else {
$("#layout_select").addClass("Hide");
}
}).change();
})
</script>
</head>
<body>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
</body>
</html>
I have 2 drop-downs.
The drop-downs are dynamically populated.
What works: If name1 (drop-down1) is selected then email1 (drop-down2) is selected. (the js works).
What's not working: After selecting name1, if I select name4 email2 is displayed. What's happening is drop-down2 is going in numbered order rather than what's selected in drop-down1 order.
What should happen: The name selected should display the email that corresponds with that name. Example: name1 = email1, name2 = email2, name3 = email3, name4 = email4, name5 = email5, etc.
HTML
<select id="names" name="names" onchange="change(this.value);">
<option value="0"></option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
<option value="name5">name5</option>
</select>
<select id="emails" name="emails" onchange="change(this.value);">
<option value="0"></option>
<option value="email1">email1</option>
<option value="email2">email2</option>
<option value="email3">email3</option>
<option value="email4">email4</option>
<option value="email5">email5</option>
</select>
JS
function change(value) {
var names = document.getElementById('names');
var emails = document.getElementById('emails');
for (i = 0; i < names.length; i++) {
if (names.options[i].value == '0') {
emails.remove(i);
}
}
}
While you tagged a jquery this is a jquery solution
function change(el , value) {
var names = $('.select'),
selected_index = $(el).find('option:selected').index();
$('.select').not($(el)).find('option:eq('+selected_index+')').prop('selected',true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" id="names" name="names" onchange="change(this , this.value);">
<option value="0"></option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
<option value="name5">name5</option>
</select>
<select class="select" id="emails" name="emails" onchange="change(this , this.value);">
<option value="0"></option>
<option value="email1">email1</option>
<option value="email2">email2</option>
<option value="email3">email3</option>
<option value="email4">email4</option>
<option value="email5">email5</option>
</select>
Steps:
1- don't forget to include jquery
2- give both of your <select> a class class="select"
3- your function will be change(el , value)
4- use the function like onchange="change(this , this.value);"
Try
function change(value){
var emails = document.getElementById('emails');
var emailValue = value.replace("name", "email");
for(var i = 0; i < emails.length; i++){
if(emails.options[i].value == emailValue){
emails.options[i].selected = true;
}
else {
emails.options[i].selected = false;
}
}
}
I think that should work.
Please guide me how can I make this code better.
var employees_json = [
{"id":"1","departments_id":"1","designations_id":"1","employee_types_id":"1","name":"name1"},
{"id":"2","departments_id":"2","designations_id":"2","employee_types_id":"1","name":"name2"},
{"id":"3","departments_id":"3","designations_id":"3","employee_types_id":"2","name":"name3"},
{"id":"4","departments_id":"4","designations_id":"4","employee_types_id":"3","name":"name4"},
{"id":"5","departments_id":"5","designations_id":"5","employee_types_id":"3","name":"name5"}
];
$("._employee_selection").change(function() {
update_employees();
});
function update_employees() {
var departments_id = $('#departments_id').val();
var designations_id = $('#designations_id').val();
var employee_types_id = $('#employee_types_id').val();
options = '<option value="">Select an option</option>';
$.each(employees_json, function(index, val) {
var selection = 0;
if (departments_id == '' || val.departments_id == departments_id) {
selection += 1;
}
if (designations_id == '' || val.designations_id == designations_id) {
selection += 1;
}
if (employee_types_id == '' || val.employee_types_id == employee_types_id) {
selection += 1;
}
if (selection == 3) {
options += `<option value="${val.id}">${val.name}</option>`;
}
});
$("#employees_id").html(options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="departments_id" class="_employee_selection">
<option value="" selected="selected">Select an option</option>
<option value="1">Administration</option>
<option value="2">Data Entry</option>
<option value="3">Development</option>
<option value="4">Management</option>
<option value="5">Marketing</option>
</select>
<select id="designations_id" class="_employee_selection">
<option value="" selected="selected">Select an option</option>
<option value="1">Administration</option>
<option value="2">Data Entry</option>
<option value="3">Development</option>
<option value="4">Management</option>
<option value="5">Marketing</option>
</select>
<select id="employee_types_id" class="_employee_selection">
<option value="" selected="selected">Select an option</option>
<option value="1">Permanent</option>
<option value="2">contract</option>
<option value="3">Probation</option>
</select>
<select id="employees_id">
</select>
What is a better way to populate a dropdown on the basis of multiple dropdown selections?
This is basically a search filter and I'm not doing an Ajax to fetch data from filtered dropdowns.
I have a json array of employees with their department, designation and type in each element of array.
From the dropdown above selected in any combination, I'm trying to populate the employee list.
The following code is working for me, But I'm hoping for an easy and better way of doing it, which I'm not sure how can be done more efficiently.