I have a table that shows some information of tickets
check this for the html of table. Check this jsfiddle
how can I loop through each select box click?, select box i.e rows will varies.
please give me some hints.
thank you...
<table id="tableTickets" class="table table-striped custab">
<thead>
<tr>
<th> Ticket Type </th>
<th> REMAINING </th>
<th> Price </th>
<th> Quantity </th>
</tr>
</thead>
<tbody>
<tr id="ticketRow1">
<td id="tdTicketName1">
<input type="hidden" id="ticketId" name="ticketId" value="1">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity1">
100 </td>
<td id="tdTicketPrice1">
<div id="divTicketPrice1">12.30</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty1" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow2">
<td id="tdTicketName2">
<input type="hidden" id="ticketId" name="ticketId" value="2">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity2">
200 </td>
<td id="tdTicketPrice2">
<div id="divTicketPrice2">12.34</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty2" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow3">
<td id="tdTicketName3">
<input type="hidden" id="ticketId" name="ticketId" value="3">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity3">
100 </td>
<td id="tdTicketPrice3">
<div id="divTicketPrice3">23.52</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty3" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow4">
<td id="tdTicketName4">
<input type="hidden" id="ticketId" name="ticketId" value="4">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity4">
200 </td>
<td id="tdTicketPrice4">
<div id="divTicketPrice4">15.41</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty4" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:right;">
<h4 class="heading1">Total <div id="ticketPriceTotal" class="col-sm-12">000</div></h4>
</td>
</tr>
</tbody>
</table>
first give class to to price <div class="price"></div> and then write code given bellow,
$(document).on("change",".form-control",function(){
var total=0;
$("tbody tr").each(function(){
var price=$(this).find(".price").text();
var tickets=$(this).find(".form-control").val();
total=parseFloat(total)+(parseFloat(price)*parseFloat(tickets));
})
alert(total);
});
Check code on fiddle. with below code you can get each select box "onchange" or "onclick" event.
jsfiddle
$(document).ready(function(){
$('select').on('change',function(){
alert($(this).val())
})
})
Related
Following is my code :
<tr class = "dynamicRow">
<td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuselect" onchange="setStudentLimit(this);">
<html:option value="">
<bean:message key="label.student.code" />
</html:option>
<html:optionsCollection name="masStudentForm"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
....
</tr>
At the end of the row I have an add button where this dropdown will be added dynamically.Along with this dropdown many other textfields are present.
My Requirement : When user selects the same option in the dropdown the valuesmore than 5 times the values should get disabled. Should happen on Onchange() of this dropdown. Kindly help.
You first need to get value of your selects using .val() then you need to iterate through all selects in your tables to see how many times that value is selected . If the value matches then increment the count and at the end you can check if the count value is > 5 then show alert or disable that option.
Demo Code ( with dummy datas) :
function setStudentLimit(el) {
var intKeyCount = 0;
var value = $(el).val(); //get that value
//iterate through all selects
$('.dynamicRow select').each(function() {
//if value matches
if ($(this).val() === value) {
intKeyCount++; //increment
}
});
if (intKeyCount > 5) {
alert("you cannot choose again");
//or disable that option
//$(el).find("option:selected").prop('disabled',true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Selects</th>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
</table>
I need help I'm new to this but I have 3 dropdown menus how would count them and total them all up to prompt the user if the total of the dropdowns is more then 10 in total:
I have added the code I'm using below:
<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" align="right">N1:</td>
<td width="270" align="right">
<select name="N1" id="N1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td width="270" align="right">N2:</td>
<td width="270" align="right">
<select name="N2" id="N2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<td width="370" align="right">N3:</td>
<td width="270" align="right">
<select name="N3" id="N3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</td>
</tr>
</table>
Attach the change event to all the three select's, then on change loop through the select's you've and calculate the total sum of the selected value, like :
$('select').each(function() {
total += Number($(this).val());
});
Code:
$('select').on('change', function() {
var total = 0;
$('select').each(function() {
total += Number($(this).val());
});
console.log(total);
if (total > 10) {
console.log('Alert user');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" align="right">N1:</td>
<td width="270" align="right">
<select name="N1" id="N1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td width="270" align="right">N2:</td>
<td width="270" align="right">
<select name="N2" id="N2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td width="370" align="right">N3:</td>
<td width="270" align="right">
<select name="N3" id="N3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</table>
UPDATE: so more accurately it seems the table cell appears and immediately disappears again?
UPDATE UPDATE: it works if I use onmousedown instead of onclick? But of course the second I release the mouse button it disappears again so that won't work either.
So I've searched around and can't seem to make this work. I'm simply trying to make a function so that when I click a button it changes the default display style for a table cell from none to show the cell.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="buildform.js" defer></script>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="buildform.css" />
</head>
<body>
<form id="buildForm">
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tr>
<td colspan="3">Custom Computers Order Form</td>
</tr>
<tr>
<td><label>Operating System</label></td>
<td>
<select id="operatingSys" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="w7h" value="w7h">Windows 7 Home</option>
<option name="w7p" value="w7p">Windows 7 Professional</option>
<option name="w10h" value="w10h">Windows 10 Home</option>
<option name="w10p" value="w10p">Windows 10 Professional</option>
</select>
</td>
<td rowspan=2><label name="displayPrice" id="displayPrice">Display</label></td>
</tr>
<tr>
<td><label>Processor</label></td>
<td>
<select id="processors" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td><label>Motherboard</label></td>
<td>
<select id="motherboards" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="a" value="a">Motherboard a</option>
<option name="b" value="b">Motherboard a</option>
<option name="c" value="c">Motherboard a</option>
</select>
</td>
</tr>
<tr>
<td rowspan=4><label>RAM</label></td>
<td>
<select id="ram1" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
<button onclick="add()">Add More?</button>
</td>
</tr>
<tr>
<td id="hiddenRam1">
<select id="ram2" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td id="hiddenRam2">
<select id="ram3" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td id="hiddenRam3">
<select id="ram4" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td><label>Hard Drive</label></td>
<td>
<select id="hardrives" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ssd128gb" value="ssd128gb">128 GB Corsair SSD</option>
<option name="ssd256gb" value="ssd256gb">256 GB Corsair SSD</option>
<option name="hdd500gb" value="hdd500gb">500 GB Western Digital HDD</option>
<option name="hdd1tb" value="hdd1tb">1 TB Western Digital HDD</option>
</select>
</td>
</tr>
<tr>
<td><label>Power Supply</label></td>
<td>
<select id="psus" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="300watt" value="300watt">300 Watt P/S</option>
<option name="400watt" value="400watt">400 Watt P/S</option>
<option name="500watt" value="500watt">500 Watt P/S</option>
<option name="600watt" value="600watt">600 Watt P/S</option>
<option name="700watt" value="700watt">700 Watt P/S</option>
</select>
</td>
</tr>
<tr>
<td><label>Case</label></td>
<td>
<select id="processors" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="case1" value="case1">Case 1</option>
<option name="case2" value="case2">Case 2</option>
<option name="case3" value="case3">Case 3</option>
</select>
</td>
</tr>
</table>
The javascript
function add() {
var x = document.getElementById("hidden");
x.style.display = "table-cell";
}
When someone clicks the 'Add More' button, the second select with options should show up. I have no idea what I'm doing wrong.
Nothing at all happens.
Try the following:
x.style.display = "table-cell"
I'm trying to create a table that have "add" button to add new rows in every new row then remove the previous button. I have a code like this.
$("#insert-more").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
Or you can see it here https://jsfiddle.net/f6xcqy2s/.
In that code the add button will show up in every rows, but i wanted the add button just show up in new row only, so there will be one button only. Do you know the way?
Hide the button like below.change the id of the button to a class and bind the button like below.it works perfectly
$('body').on('click','.insert-more',function(){
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).hide();
})
here is the fiddle
you need to put add button outside the #mytable (table) so you can get your desire output only change html part as i pasted here.
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
</tr>
</tbody>
</table>
</table>
<tr>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td></tr></table>
let me know is it ok for you ?
Here first we create an event handler function and assign it to clickHandler. Then when we append the button into the table row after that we assign that click handler to the newly added button using the code as$("#insert-more").click(clickHandler);.
$( document ).ready(function() {
var clickHandler = function() {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).remove();
$("#insert-more").click(clickHandler);
};
$("#insert-more").click(clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="insert-more btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
Here you go with a solution https://jsfiddle.net/f6xcqy2s/4/
$(document).on('click', "#insert-more", function () {
$('#mytable tbody')
.append(`<tr>${$(this).closest('tr').html()}</tr>`);
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
In the solution, amount of jQuery code is very less.
Hope this will help you.
i have a table like this:
<table class="mytable">
<tr>
<td>
<select class="go">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</table>
and my jquery code like this:
$(".go").change(function(){
var selVal=[];
$(".go").each(function(){
selVal.push(this.value);
});
$(this).closest('tr').siblings(".go").find("option").removeAttr("disabled").filter(function(){
var a=$(this).parent("select").val();
return (($.inArray(this.value, selVal) > -1) && (this.value!=a))
}).attr("disabled","disabled");
});
My Fiddle
How do i disable siblings value if i select 1 on this dropdown, but i should not able to select the 1 on another dropdown again. Here is the working example that work perfectly without table/td/. My requirement come across to use table tr/td. I tried to use: $(this).closest('tr').siblings(".go")
but its not working. any idea?
Try passing tr to .siblings()
$(this).closest("tr").siblings("tr").find("option")
jsfiddle http://jsfiddle.net/ev5qvprv/122/
you can do this by finding the closest table first .. and then find ".go" except the current one
The selector you used is not correct.
$(this).closest('tr').siblings(".go").find("option")
This will give you nothing because tr doesn't have any sibling .go.
You have two solutions for the selector:
$(this).closest('tr').siblings("tr").find("option")
or
$('table.mytable').find("option")