Develop Reference

Radio button and check box checked, depending on value on the top of the page

I have this page depending on the val on the top of the page, select check boxes are shown or hidden.
If Value is VAL then check boxes are shown and only after selecting the check box, values get populated in the text area. So far it works.
Now if the Value is MAR then the check boxes will be hidden. This is where values are not populating in the text area.
Help is much appreciated. FIDDLE
$('table').find("input[type=radio]:checked:enabled").each(function () {
if($('table').find("input[type=checkbox][name='" + $(this).attr('name') + "']").is(':checked')) {
// See if we have a text box, if so use the text
var $text = $(this).parent().find('textarea.m-notes:visible');
var missingReason = $(this).parent().find('.reason').val();
// Find closest ancestor with an id
var selectedId = $(this).closest('[id]').attr('id');
var value = selectedId + "~" + $(this).val();
if ($text.length)
{
value += "~" + missingReason +"~" + $text.val();
}
clicked.push(value);
}
}); //checked
// Display the selected ids
$("#inputhere").val(clicked.join('|'));
}

always show the options for select tag even after hiding some

Hi i have this code that will hide an option once its already selected by other select tags on the same page, the problem now is that when a lot of the options have been selected the height of the drop down decreases to the point where the other choices are not visible anymore. is there a way for the height of the drop down to stop decreasing?
Thank you.
Hiding function:
function updateOthers2(val) {
$("option").show();
$(".tblboxes").each(function (i) {
var obj = $("option[value='" + $(this).val() + "']");
if ($(this).val() != "") obj.hide();
});
}

Change the style of the drop down

I have a 4 drop down list based on each drop down value the other drop down will change i tried to change the style of the drop down list using CSS and jquery and javascript.
I almost got the style of the drop down and the functionality also works fine, but where i am stuck is
In the jquery what is done is
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
$(this).change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});
});
so for all the select it automatically wraps with div and after that the 2 spans are placed.
So when i change the value on the 1 drop down for the first time the values of the 2nd drop down is changed .
When i again change the value of the 1 drop down the 2 drop down values does not reset to the default value.
Because the span hold the value of the previously selected value.. How can i overcome this.

Have you tried like this:
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
$("select").change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});

How the select the multiple Table data as per selected checkbox?

There is one data table with two rows, as per below image
When user click on 2bit it should highlight that TD in that column only. I achieved this using jQuery for one check box selection, but when multiple check box selection like 2 and 4 it should highlight both the TD.
http://jsbin.com/exazoh/edit#preview working example for single value highlight.
Code: http://jsbin.com/exazoh/2/edit

Try the following function:
jQuery(function() {
// on change of an input with a name starting with "bit-select"...
jQuery('input[name^="bit-select"]').change(function(){
var checked = this.checked,
val = this.value,
column = $(this).closest("th").index() + 1;
// for each td in the current column
jQuery("#tableData tr.data td:nth-child(" +
column + ")").each(function() {
var $td = $(this);
// does the current td match the checkbox?
if ($td.text() == val) {
if (checked)
$td.addClass("jquery-colorBG-highLight");
else
$td.removeClass("jquery-colorBG-highLight");
}
});
});
});
I had to add the value attributes to the second set of checkboxes.
Working demo: http://jsbin.com/exazoh/4/edit#preview
Or the short version, since I notice you were using .filter() originally:
jQuery(function() {
jQuery('input[name^="bit-select"]').change(function(){
var method = this.checked ? "addClass" : "removeClass",
val = this.value;
jQuery("#tableData tr.data td:nth-child("+($(this).closest("th").index()+1)+")")
.filter(function(){return $(this).text()==val;})[method]("jquery-colorBG-highLight");
});
});
Demo: http://jsbin.com/exazoh/5/edit

Remove selected items from other select inputs

I have a problem with select input items.
What I want to achieve is dynamically remove already selected options from other select boxes so that I cannot select same item on multiple boxes. The problem is that elements are loaded in array via AJAX and I need to fill the select input with options after. This makes it so much harder.
In short - How can I make sure that if I select one item in select it will be deleted on all others, but when I select something else the previous item will be shown again and so on...
I have a fiddle as well, this is how far I got: http://jsfiddle.net/P3j4L/

You can try something like this
function updateSelects()
{
$('.selectContainer .select').each(
function (i, elem)
{
// Get the currently selected value of this select
var $selected = $(elem).find("option:selected");
// Temp element for keeping options
var $opts = $("<div>");
// Loop the elements array
for (i = 0; i < selectElements.length; i++)
{
var value = selectElements[i];
// Check if the value has been selected in any select element
if ($selected.val() == value || !$('.select option[value=' + value + ']:selected').length)
{
// if not create an option and append to temp element
$opts.append('<option value="' + value + '">' + value + '</option>');
}
}
// replace the html of select with new options
$(elem).html($opts.html());
if ($selected.length)
{
// set the selected value if there is one
$(elem).val($selected.val());
}
else
{
// new select element. So remove its selected option from all other selects
$('.selectContainer .select').not(this).find('option[value=' + $(elem).val() + ']').remove();
}
}
);
}
see a demo here : http://jsfiddle.net/P3j4L/1/