Develop Reference

disable previously selected dropdown option, check both text & id value

In a table, how to loop through all dropdowns text & id in a table's col, and save them in array. So that I can disable previously selected options
Once an option is selected, I do not want it to be available again. How to check the selected text of previously selected options in the table set that option to disabled on all other dropdowns in the page.
(this question is different from other SO questions since its disabling after checking both selected text & selected value inside a table and needs to target the dropdown in the specified column)
var allSelectedValuesArray = array();
allSelectedValuesArray.push($("#tblVersions .Model option:selected").text());
var rows = $("body tr",$("#tblVersions")).map(function() {
return [$("td:eq(0) input:checkbox:checked",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
<table id="tblversions">
<tbody id="body">
<tr class="rowcss">
<td>
<select class="Manufacturer">
<option value="1">Toyota </option>
<option value="2">Honda</option>
<option value="3">BMW</option>
</select>
</td>
<td>
<select class="Model">
<!-- If user selects Honda my Ajax populates Honda Models/Cars like below-->
<option value="1">Accord</option>
<option value="2">Toyota 2</option>
<option value="3">Honda 3</option>
</select>
</td>
</tr>
<tr class="rowcss">
<td>
<select class="Manufacturer">
<option value="1">Toyota </option>
<option value="2">Honda</option>
<option value="3">BMW</option>
</select>
</td>
<td>
<select class="Model">
<!-- If user selects BMW my Ajax populates BMW models Cars like below-->
<option value="1">X5 Suv</option>
<option value="2">318 series Cheap</option>
<option value="3">540i too expensive!</option>
</select>
</td>
</tr>
</tbody>
</table>

I didn't understand the second part of your question, but if you want to get text and values for all dropdowns you could do something like this.
// Called when any of the dropdowns change
( "#tblversions" ).change(function() {
var allSelectedValuesArray = [];
// Search for all selects in the #tblversions
$("#tblversions select option:selected").each(function() {
// for each one, push it into the array
allSelectedValuesArray.push({text:$(this).text(), value:this.value});
});
});
This creates an array of objects in the format {text:"sometext",value:"somevalue"} for each of the dropdowns in the table.

jQuery - order html table rows dynamically, not using ui-sortable

I'm trying to make a controllable html table list.
My List is like that:
<table>
<tr id="selection_18">
<td>
<select id="colors_18">
<option value="0">All</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
</select>
</td>
</tr>
<tr id="selection_27">
<td>
<select id="colors_27">
<option value="0">All</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
</select>
</td>
</tr>
<tr id="selection_5">
<td>
<select id="colors_5">
<option value="0">All</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
</select>
</td>
</tr>
<tr>
<td>
<button onclick="orderRows();" />
</td>
</tr>
</table>
Scenario is like that: user select all colors for example;
for first row he selected red, for second row he selected yellow, for third row he selected again red, ... and for ninetieth row he selected yellow.
And user wants to order all rows by color again to see for example which color is selected how many times.
What should i write in javascript function orderRows(). I can use jQuery but not want to use jQuery UI sortable. Because in some of my list, it has 400 rows. I think it would be not good solution.

You can use this;
$("#order").on("click", function() {
$('tr').sort(function(a, b){
return $(a).find("option:selected").text() > $(b).find("option:selected").text();
}).appendTo('table')
});
$("#order").appendTo("table"); // this is for keep button place
Here is a working demo: jsfiddle
In demo, you can select colors, and click order button. After order, you can select your colors again and click order to shuffle.
Note: a, and b in function refers to specific two elements n and n+1 for each iteration. It means, it is comparing nth and (n+1)th element for each iteration. If n > n+1 element, n remains same, if not, n+1 moves place before n

The function below will build a hashmap that groups the IDs of the select elements based on the color selected. You could use that hashmap to render the table however you would like to.
See the working demo at:
JSFiddle
JS:
function orderRows(){
var colorArray = [ 'All', 'Red', 'Yellow' ];
var colorMap = {};
$('table select').each(function(){
var color = colorArray[$(this).val()];
if( colorMap[color] == undefined ){
colorMap[color] = [];
}
colorMap[color].push($(this).attr('id'));
});
$('div#display').html(JSON.stringify(colorMap));
}
HTML added (notice that the button was pulled out of the table):
<div>
<button onclick="orderRows()">orderRows</button>
</div>
<div id="display">
</div>
JSON displayed example:
{"Red":["colors_18","colors_5"],"Yellow":["colors_27"]}

Class not changing when dropdown value is selected with JQuery

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

How to display tables using dropdown box

I am trying to display two tables using dropdown box choices.
I'm using this JS code. Here's FIDDLE
function change_tbl(dhi)
{
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
}
but it isn't working. How?
I need first table to display on load. (Means first table should be default choice.)
Any solutions?

You need to call the function in onchange() like
<select onchange="change_tbl(this.value)">
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
Demo: Fiddle
Also in the fiddle there are few other problems like
jQuery was not included
since change_tbl is used in an inline handler you need to declare it in the global scope - select No Wrap Head/Body in the second dropdown in the left panel
Use a jQuery event handler like
<select id="table-select">
<option value="">select table</option>
<option value="tb1" selected>table 1</option>
<option value="tb2">table 2</option>
</select>
then use a .change() handler to register the change event handler
jQuery(function () {
$('#table-select').change(function () {
$('#tbl_div > div').css('display', 'none');
if (this.value) {
$('#' + this.value).css('display', 'block');
}
}).change(); //this is used to trigger a manual change handler initially so that the state is properly set on page load
})
Demo: Fiddle
Also read: Document Ready, trigger handler, change() handler, id-selector

Demo : http://jsfiddle.net/4K9hM/3/
Html:
<select id="tt" >
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
<div id="tbl_div">
<div id="tb1">
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
<div id="tb2">
<table border="1">
<tr><td>2</td><td>2</td></tr>
<tr><td>2</td><td>2</td></tr>
</table>
</div>
</div>
Js:
$(document).ready(function(){
$("#tt").change( function ()
{
dhi = $("#tt").val();
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
});
});

Enable and Disable td in table

<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.)