I have 1 set of <select><option> which is if I select 1 option by it value, it will display some text in <div>.
This is my code
$(document).ready(function() {
$('#selectcom').change(function() {
opt = $(this).val();
if (opt == "comp_id") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
} else if (opt == "comp_name") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select class="selectField" onChange="" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row">
<div id="new_text"></div>
</td>
<td id="size_row">
<div id="size_row"></div>
</td>
</tr>
The problem is I cannot display any output either varchar text or 20 text with this code. Anyone please help me. Thank you..
No enough information; yet try to make sure you included jQuery reference in :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
In case you did that , as I can see from jsfiddle. I suspect the css is showing the output in white...try to show some css code.
First check console if you are getting some error due to other script also remove onChange="" if you are using direct jquery on change function, or use below approach.
<tr>
<td>
<select class="selectField" onChange="changeMyValue(this.value)" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row"><div id="new_text"></div></td>
<td id="size_row"><div id="size_row"></div></td>
</tr>
function changeMyValue(opt) {
if (opt=="comp_id")
{
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
else if (opt == "comp_name")
{
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
}
It works. I would suspect that you haven't referenced jQuery before your script block/file. Check the developer's console. Does it display something like:
Uncaught ReferenceError: $ is not defined
Solution: Make sure your jQuery file is loaded before your script block/file.
Like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="your-jsfile.js" type="text/javascript"></script>
Not like:
<script src="your-jsfile.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$('#selectcom').change(function() {
opt = $(this).val();
if (opt == "comp_id") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
} else if (opt == "comp_name") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select class="selectField" onChange="" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row">
<div id="new_text"></div>
</td>
<td id="size_row">
<div id="size_row"></div>
</td>
</tr>
Also, I recommend using a switch statement. I don't know about performance, but in my opinion, it improves readability.
$(document).ready(function() {
$('#selectcom').change(function() {
opt = $(this).val();
switch (opt) {
case "comp_id":
$('#new_text').html('Varchar');
$('#size_row').html('20');
break;
case "comp_name":
$('#new_text').html('Varchar');
$('#size_row').html('20');
break;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select class="selectField" onChange="" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row">
<div id="new_text"></div>
</td>
<td id="size_row">
<div id="size_row"></div>
</td>
</tr>
Related
function RefiPurpose(whichone) {
if (whichone == "Test 1" || whichone == "") {
document.getElementById("refi_purp").style.display = "inline";
} else if (whichone == "Test 2") {
document.getElementById("refi_purp").style.display = "none";
}
}
<table width="100%" bordercolor="#000033">
<tr>
<td style="padding-left:30px">Drop Down 1</td>
<td style="width:180px"><label name="h_sLoanPurp_err" include="yes"></label>
<select id="h_sLoanPurp" NAME="h_sLoanPurp" onchange="RefiPurpose(this.value)" include="yes">
<option>Please Choose One</option>
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
</select>
</td>
</tr>
<tr id="refi_purp">
<td style="padding-left:30px" id="refi_purp_td">Drop Down 2:</td>
<td><label name="h_refipurp_err" include="yes"></label>
<select id="h_refipurp" NAME="h_refipurp" tabindex="60" include="yes" style="width: 170px"></select>
</td>
</tr>
</table>
In order to get it to the original position you should set the display value of the row to table-row , because that is the original display value. Also please note your first option has no value. And as you can read here about this, your first option will have the value "Please Choose One" insead of "".
Also, as I was saying inline styling is not a good practice. And is better and easier to do it with classes.
So I would recomand something like this:
function RefiPurpose(whichone) {
if (whichone == "Test 1" || whichone == "") {
document.getElementById("refi_purp").className -= " no-display";
} else if (whichone == "Test 2") {
document.getElementById("refi_purp").className += " no-display";
}
}
.no-display {
display: none;
}
<table width="100%" bordercolor="#000033">
<tr>
<td style="padding-left:30px">Drop Down 1</td>
<td style="width:180px"><label name="h_sLoanPurp_err" include="yes"></label>
<select id="h_sLoanPurp" NAME="h_sLoanPurp" onchange="RefiPurpose(this.value)" include="yes">
<option value="">Please Choose One</option>
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
</select>
</td>
</tr>
<tr id="refi_purp">
<td style="padding-left:30px" id="refi_purp_td">Drop Down 2:</td>
<td><label name="h_refipurp_err" include="yes"></label>
<select id="h_refipurp" NAME="h_refipurp" tabindex="60" include="yes" style="width: 170px"></select>
</td>
</tr>
</table>
But if you really want to keep the inline styling you can also replace the code inside the first if in your sample code with. document.getElementById("refi_purp").style.display = "table-row"; and give the first option the value="" and it should work.
I am looking at this post: Using jQuery to dynamically add form fields (or fieldsets) based on a dropdown box value
is there not an easier way?
my code:
<tr>
<td valign="top">
<label for="children">No. of Minor Children*</label>
</td>
<td>
<select id="nochildren" name="nochildren" onchange="displayfields(this.value)">
<option value="1">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<br />
<option value="<?php echo $row_list['nochildren']; ?>">
<?php if($row_list['nochildren']==$select){ echo $row_list['nochildren']; } ?>
</option>
<script language="JavaScript">
$(document).ready(function(){
$('#nochildren').change(function(){
$("#child").show();
displayfields($(this).val());
});
});
function displayfields(val)
{
for (var i=1 ; i<val; val++)
{
alert(i);
$("#child"+i).show();
}
}
</script>
</tr>
<div id="child">
<tr>
<td valign="top">
<label for="names">Child Full names*</label>
</td>
<td valign="top">
<input type="text" name="childname" maxlength="50" size="30"></input>
</td>
</tr>
</div>
if no children don't show the div if 4 children show 4 div tags
Try this:
<script type="text/javascript">
$(document).ready(function(){
$('#nochildren').change(function(){
//-------
// Here add your code to hide all div's
//-------
displayfields($(this).val());
});
});
function displayfields(val)
{
for (var i=1 ; i<val; val++)
{
alert(i);
$("#child"+i).show();
}
}
</script>
See this Fiddle. I have not included the styles for it and it is just a core implementation.
Below is the jQuery which I am using
$(function(){
var inputString="<input type='text'>";
$('#selectBox').on('change',function(){
$('#result').html('');
for(var i = 0;i<$('#selectBox :selected').val();i++)
{
$('#result').append(inputString);
}
});
});
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();
}
});
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
I am trying to clone last row when Add Row button is clicked as below, this code is working fine with 1.7.1 jquery but if i refer 2.0.2 not working
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
then it is not working.
I have added jquery-migrate-1.1.1.js but still no use.
Please help to resolve.
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<table id="advFilterTable" class="table-filter">
<tbody>
<tr>
<td>
<select id="advFilterColumn1" name="advFilterColumn1" class="chzn-select filter-column" data-placeholder="Select Column" style="width: 120px;">
<option value=SupportDesciption>Support Desciption</option>
<option value=CostCentre.CostCentreCode>Cost Centre</option>
<option value=AdditionalPropertyValue.value>System Roles</option>
<option value=AdditionalProperty.Key>System Role Type</option>
</select>
</td>
<td>
<select id="advFilterOperand1" name="advFilterOperand1" class="chzn-select filter-operand" data-placeholder="Select Operand" style="width: 120px;">
<option value=Equals>Equals</option>
<option value=GreaterThan>GreaterThan</option>
<option value=LessThan>LessThan</option>
<option value=GreaterThanOrEqual>GreaterThanOrEqual</option>
<option value=LessThanOrEqual>LessThanOrEqual</option>
<option value=Contains>Contains</option>
<option value=StartsWith>StartsWith</option>
<option value=EndsWith>EndsWith</option>
</select>
</td>
<td>
<input id="advFilterText1" name="advFilterText1" class="filter-text" style="height: 17px; margin-bottom: 8px" type="text" value=""></input>
</td>
<td>
<button class="btn delete-filter" id="advFilterbtn1" name="advFilterbtn1" style="margin-bottom: 8px"><i class="icon-minus"></i></button>
</td>
</tr>
</tbody>
</table>
<button class="add-filter">Add Row</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(".add-filter").live('click', function(event) {
// clone the last row in the table
var $tr = $('.table-filter').find("tbody tr:last").clone();
// get the name attribute for the input and select fields
$tr.find("input,select").attr("name", function() {
// break the field name and it's number into two parts
var parts = this.id.match(/(\D+)(\d+)$/);
if (parts != null) {
// create a unique name for the new field by incrementing
// the number for the previous field by 1
return parts[1] + ++parts[2];
}
return rollDice();
// repeat for id attributes
}).attr("id", function() {
var parts = this.id.match(/(\D+)(\d+)$/);
if (parts != null) {
return parts[1] + ++parts[2];
}
return rollDice();
});
$('.table-filter').find("tbody tr:last").after($tr);
});
</script>
</body>
</html>
to expand upon Lwyrn's answer,
change
$(".add-filter").live('click', function(event) {
to
$(document.body).on('click', '.add-filter', function(event) {
live function is deprecated in jquery 1.7 and totally removed in 1.9
use .click instead of .live