I have a problem writing a function to hide two cells depending on the selected value.
The biggest problem is that the HTML is generated and there can be one such select or eight of them. And to make things more interesting, every one of this select is placed in a separate div and while one is shown, others are hidden.
Here is the function I use to toggle cells. Cells can be shown only if selected value is 'Z', otherwise they must be hidden. It works only on the first select while other are completely ignored. I was trying to use .each() function for every element with id="selector" but there was quite a mass with element indexes and it didn't work either.
$("#selector").change(function(){
if($(this).val().trim() == 'Z'){
$("#labelToHide").toggle(true);
$("#selectToHide").toggle(true);
} else {
$("#labelToHide").toggle(false);
$("#selectToHide").toggle(false);
}
});
Here is the working JSFiddle. It might look incomplete, but it is enough to simulate real situation. Bellow is the XML code I work with from which the HTML is generated.
<xh:td class="RightColumn" id="selectToHide">
<form:selectOne ...>
<!-- form code -->
</form:selectOne>
</xh:td>
Is there some way I can make this script work only for currently shown div? Or is there some other workaround?
With the multiple use of IDs it was never going to work as you were doing it. In the following I've changed all the IDs to relevant classes and modified the script to take that into account...
HTML
<div id="divOne">
<table class="gridtable">
<tr>
<td id="allwaysShown">Allways Shown</td>
<td id="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="toHide">Hide this</td>
<td class="toHide">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
<div id="divTwo">
<table class="gridtable">
<tr>
<td id="allwaysShown">Allways Shown</td>
<td id="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="toHide">Hide this</td>
<td class="toHide">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
Javascript
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).closest("tr").find(".toHide").show();
} else {
$(this).closest("tr").find(".toHide").hide();
}
});
What this now does is when a select element (with the class selector) changes, it parses up the DOM to find the row that it is contained in, and then finds all the elements with the class toHide, and either hides or shows them.
Your jsfiddle, modified...
Once you fix the issue with multiple id by changing them to class, you can use the following :
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).parent().nextAll("td").show();
} else {
$(this).parent().nextAll("td").hide();
}
});
$(".selectToHide select").change(function () {
if ($(this).val().trim() == 'Y') {
$(this).parent('td').prev().show();
} else {
$(this).parent('td').prev().hide();
}
});
Updated fiddle
You must use unique ids, use classes instead of ids to group the elements. Instead of toggle use show / hide and assign common class to both select and label e.g. toShowHide and use single call to show hide both. I have changed the html attributes just to demonstrate you should change according to your requirement by keeping in mind that ids must be unique.
Live Demo
$(".selector").change(function () {
if ($(this).val().trim() == 'Z')
$(this).parent().siblings(".toShowHide").show();
else
$(this).parent().siblings(".toShowHide").hide();
});
In HTML id's are all unique, that means on a single page of HTML there can only be one id with the same name, if you have used #selector before, you shouldn't use it again (it won't work in the first place.)
Always use a class for this.
Here's your working code as you needed it
<div id="divOne">
<table class="gridtable">
<tr>
<td class="allwaysShown">Allways Shown</td>
<td class="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="hide_this">Hide this</td>
<td class="hide_this">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
<div id="divTwo">
<table class="gridtable">
<tr>
<td class="allwaysShown">Allways Shown</td>
<td class="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="hide_this">Hide this</td>
<td class="hide_this">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
JQuery
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).closest('tr').find('.hide_this').show();
} else {
$(this).closest('tr').find('.hide_this').hide();
}
});
Related
I want to get the selected value of the inputs.
Only if the ascendent class is a specific one - Q01.
Assume there is no "name" or "ID" on the select menu as i dont know it at run time.
JSFiddle Here
<table>
<TR>
<td class="Q01" valign="MIDDLE"> <b>01.1 </b>Question 01 </td>
<TD>
<SELECT CLASS="selectMenu" ID="" NAME="">
<OPTION VALUE=""><None></OPTION>
<OPTION VALUE="2" SELECTED>2</OPTION>
<OPTION VALUE="1">1</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<td class="Q01" valign="MIDDLE"> <b>01.1 </b>Question 02 </td>
<TD NOWRAP>
<SELECT CLASS="selectMenu" ID="" NAME="">
<OPTION VALUE=""><None></OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="1">1</OPTION>
</SELECT>
</TD>
</TR>
</table>
I have tried $(".Q01:first").next('select').val(); but it returns undefined
EDIT - I changed "input" to "select", my mistake.
ANSWER EDIT - thanks to Hello Cynogenic, i further narrowed it down to what I was after, using "alert($('.Q01:first').next('td').find('select option:selected').val()) i was returned the selected option from the first select menu.
alert($(".Q01:first" ).next('td').children().val());
Check below link :-)
JSFiddle
First off, you have a spare </TD> tag that means your markup is broken.
Assuming you remove the errant tag, this will give you the select element:
$('.q1').next('td').find('select');
You have to traverse the document step by step.
next() means "find the next element within this container, at this level, if it matches the specified selector"
find() means "search the current element for children matching the specified selector"
Right, i have got a table, with two rows. In the right cell i have a drop down menu with the values (1, 2 and 3).
Depending on with is selected i want the table row its in to change a specific colour. I have managed to get this to work when i have one table row and it works fine changing between values. However when i copy my code to make multiple lines it stops workin.
with multiple rows, if i click value 2 on the first it changes the first row too the correct colour, then if i change the value say on row 5, no matter what value i choose it will change to the colour of the first row i changed. If that makes sense.
Heres the code......
-
CSS
<style>
table td,th{
border:1px solid black;
padding-left:100px;
}
table tr{
background-color:red;
}
.online{
background-color:green;
}
.offline{
background-color:red;
}
.paused{
background-color:orange;
}
</style>
-
HTML
<body>
<table id="table">
<tr style="background-color:grey;">
<th>
Hello
</th>
<th>
Is it
</th>
</tr>
<tr class="options">
<td>
yayaya
</td>
<td>
<select id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr class="options">
<td>
yayaya
</td>
<td>
<select id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
</body>
-
JQUERY
<script>
$('select').change(function(){
if($('select').val() == "2"){
$(this).parents('.options').removeClass('online');
$(this).parents('.options').removeClass('offline');
$(this).parents('.options').removeClass('paused');
$(this).parents('.options').addClass('online');
}else if($('select').val() == "1"){
$(this).parents('.options').removeClass('online');
$(this).parents('.options').removeClass('offline');
$(this).parents('.options').removeClass('paused');
$(this).parents('.options').addClass('offline');
}else if($('select').val() == "3"){
$(this).parents('.options').removeClass('online');
$(this).parents('.options').removeClass('offline');
$(this).parents('.options').removeClass('paused');
$(this).parents('.options').addClass('paused');
}
});
</script>
here it is on jsfiddle so that you can see what i mean.
http://jsfiddle.net/n3nFB/1923/
try it with one row and then copy and past the same row underneath
Change all $('select').val() to this.value so that you use the one that was altered and not the first one always..
Demo at http://jsfiddle.net/gaby/n3nFB/1924/
Also, you can remove multiple classes with one call, and you can chain the following addClass
for example
$(this).parents('.options')
.removeClass('online offline paused')
.addClass('online');
Demo at http://jsfiddle.net/gaby/n3nFB/1925/
The test case is I've a table in a form. The rows are generated dynamically. Right now with plain html + javascript I've like this,
<tr>
<td>
<select id="brand_1" name="brand[]" onchange="brandChanged(1)">
//some options
</select>
</td>
<td>
<select id="model_1" name="model[]">
<option>Default Value</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="brand_2" name="brand[]" onchange="brandChanged(2)">
//some options
</select>
</td>
<td>
<select id="model_2" name="model[]">
<option>Default Value</option>
</select>
</td>
</tr>
When the brandChanged(x) method is triggered it gets the options from another file with an ajax request and adds them to model_x select element.
Everything is working fine, but my question is how to do it with jQuery? I mean what's the way to bind .change() to these input elements Also I don't like naming ids in name_id way. Is there a better design to solve this?
1) Add a common class to all.
2) remove inline onchange event and write jquery event
3) you can put the value in html5 data attribute:
<select id="brand_1" name="brand[]" class="brand" data-brand="1">
//some options
</select>
<select id="brand_2" name="brand[]" data-brand="2">
//some options
</select>
and write event on class:
$(".brand").change(function() {
var brand = $(this).data("brand");
// do something
});
This may be another approach.
http://jsfiddle.net/thecbuilder/5Lkfh558/
.on() is used because you mentioned trs are generated dynamically.
design implemented without ids
js
$(".mainTable").on("change", ".brand", function () {
var dataFromAjax = callAjax($(this).data("idx"));
$(this).parent().siblings().eq(0).find(".model").html($("<option>DATA from AJAX</option>"));
});
What I am trying to accomplish is that when a user selects a value from a dropdown box the corresponding row will change to a different color depending on the option selected.
So far I have the rows changing colors just fine but if the user changes their mind and wants to select a new option the row sometimes doesnt change colors. The change is sporadic and sometimes the color will change again sometimes it will not.
Simplified HTML table:
<table class="table" id="myTable">
<tbody>
<tr>
<td>1.</td>
<td>
<select name="queue" class="queue-drop">
<option></option>
<option class="move">Move</option>
<option class="add">Add</option>
<option class="change">Change</option>
<option class="cancel">Cancel</option>
<option class="swap">Swap</option>
</select>
</td>
</tr>
<tr>
<td>2.</td>
<td>
<select name="queue" class="queue-drop">
<option></option>
<option class="move">Move</option>
<option class="add">Add</option>
<option class="change">Change</option>
<option class="cancel">Cancel</option>
<option class="swap">Swap</option>
</select>
</td>
</tr>
</tbody>
</table>
JQuery:
$(document).ready(function(){
$('.queue-drop').change(function(){
var selectedVal = $(this).find("option:selected").text();
if (selectedVal == 'Move') {
$(this).closest('tr').addClass("move-row")
}
else if (selectedVal == "Add") {
$(this).closest('tr').addClass("add-row")
}
else if (selectedVal == "Cancel") {
$(this).closest('tr').addClass("cancel-row")
}
else if (selectedVal == "Change") {
$(this).closest('tr').addClass('change-row')
}
else if (selectedVal == "Swap") {
$(this).closest('tr').addClass('swap-row')
}
});
});
JS Fiddle: http://jsfiddle.net/exx2q/
I am somewhat new to JS and JQuery any help would be appreciated.
You can use .removeClass(), to clear class and then apply the new one
$(this).closest('tr').removeClass().addClass("move-row")
DEMO
<td><select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
After I select the option Yes or No, below TD's should be shown or not to the user.
<td id="first_td"><select class="dropDownLists" name=reportingOption id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="MyTell">Report via tool</option>
<option value="Manual">Report via manually</option>
</select>
</td>
<td id="second_td"><select class="dropDownLists" name=acctFlag id="acctFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
My questions what are the ways to control the display of the td?
one way I can do is with the DIV tags but if we use Div tag i learnt that we need to use table inside the td, in that case then the alignment will be a problem
can any one suggest any other way to get this implemented?
You can use the style visibility instead of display.
Check this code, if this the one suit your needs.
CSS
.hiddenTD{
visibility: hidden;
}
.visibleTD{
visibility: visible;
}
JS
function onFocusReportingOptions(val){
var firstTD = document.getElementById('first_td');
var secondTD = document.getElementById('second_td');
if(val == 'Y') {
firstTD.className = "visibleTD";
secondTD.className = "visibleTD";
} else {
firstTD.className = "hiddenTD";
secondTD.className = "hiddenTD";
}
}
Change something on your HTML
<td>
<select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions(this.value);'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
I think you would like imitate "disable"(not hide)
$('td.YOUR CLASS').css('opacity', '0.5').click(function () {
event.preventDefault();
return false;
});
Give the TDs an ID. Then use Javascript to hide the element with the relevant ID (via the CSS display attribute).
<td id="first_td">content</td>
<td id="second_id"><content</td>
var elem = document.getElementById("first_td");
elem.style.display = "none";
The logic for which TD is hidden or shown can be encapsulated in an event handler for the select drop-down.
Are you using tables for layout?! Use divs like such:
DEMO
Then you can easily style it to your needs. (Positioning, etc.)