We Keep Coding

Chosen select - filter <optgroup > using jquery

I am using chosen drop down in asp.net. Is there a way to filter optgroup ?
There is a radio button list control with values US and UK. I want to filter drop down based on user's radio button selection. If the 'US' is selected then drop down should only show US optgroup records.
Here is the jsfiddle;
http://jsfiddle.net/7ngftsq2/
This is what i have tried so far with no luck;
('#rbDistDiv input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
var ddlDist = $('#VCSdistSelect_ddlDist'),
val = $(this).val(),
region = $('option:selected', this).text();
$('span > optgroup', ddlDist).unwrap();
if (val !== '%') {
$('optgroup:not([label="' + region + '"])', ddlDist).wrap('<span/>');
}
});

You should be able to do something similar to this:
$(".chosen").chosen({
width: '600px',
allow_single_deselect: true,
search_contains: true
});
let UK_optgroup = $("#optgroup-uk").clone();
let US_optgroup = $("#optgroup-us").clone();
let CA_optgroup = $("#optgroup-ca").clone();
function filterSelect(selectedRadio) {
switch(selectedRadio) {
case "US": return US_optgroup
case "UK": return UK_optgroup
case "CA": return CA_optgroup
}
}
$('[type="radio"]').on('change', function() {
// This is only here to clear the selected item that is shown on screen
// after a selection is made. You can remove this if you like.
$("#selected-item").html("");
// Everything from here down is needed.
$("#select")
.children()
.remove('optgroup');
$("#select")
.append(filterSelect(this.value))
.trigger("chosen:updated");
});
$("#select").on('change', function(event) {
$("#selected-item").html("Selected Item: <b>" + event.target.value + "</b>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<table id="rbDistDiv" border="0">
<tbody>
<tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_2" type="radio" name="rbDistDiv" value="CA"><label for="rbDistDiv_2">CA</label></td>
</tr>
</tbody>
</table>
<p id="selected-item"></p>
<select id="select" class="chosen">
<option value="" disabled selected>Select your option</option>
<optgroup id="optgroup-uk" label="UK">
<option value="Adrian">Adrian</option>
<option value="Alan">Alan</option>
<option value="Alan B">Alan B</option>
</optgroup>
<optgroup id="optgroup-us" label="US">
<option value="John">John</option>
<option value="Billy">Billy</option>
<option value="Chris">Chris</option>
</optgroup>
<optgroup id="optgroup-ca" label="CA">
<option value="Gabrielle">Gabrielle</option>
<option value="Maude">Maude</option>
<option value="Morgan">Morgan</option>
</optgroup>
</select>

Just hide/show them by the label when an change is made to the radio button.
$('[type="radio"]').on('change', function () {
$('select')
.val('') // reset value if selection already made
.find('optgroup') // find the groups
.hide() // hide them all
.filter('[label="' + this.value + '"]') // find the one that matches radio
.show() // show it
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="rbDistDiv" border="0">
<tbody><tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr><tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
</tbody></table>
<br>
<select name="VCSdistSelect$ddlDist" id="VCSdistSelect_ddlDist" class="chosen-select" data-placeholder="Select a Distributor" >
<option selected="selected" value=""></option>
<optgroup label="US">
<option value="123" division="US">Aaron</option>
</optgroup>
<optgroup label="UK">
<option value="655" division="UK">John</option>
</optgroup>
</select>

display and value depending options of drop down menus with different values

I want to submit my selected value in the dropdown menu to my database, but the value that is added to the database is not the same as what I chose.
This is the record that was inserted, and the "kuarter" field value is "kuching-01":
But these are the selections I chose, where the field "kuarter" is "JALAN DURIAN BURONG STAMPIN":
How do I add the value "JALAN DURIAN BURONG STAMPIN" to the database instead of "kuching-01"?
This is my javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $options = $("#kuarter").clone(); // this will save all initial options in the second dropdown
$("#kawasan").change(function() {
var filters = [];
if ($(this).val() == "") {
$(this).find("option").each(function(index, option) {
if ($(option).val() != "")
filters.push($(option).val());
});
} else {
filters.push($(this).val())
}
$("#kuarter").html("");
$.each(filters, function(index, value) {
$options.find("option").each(function(optionIndex, option) { // a second loop that check if the option value starts with the filter value
if ($(option).val().startsWith(value))
$(option).clone().appendTo($("#kuarter"));
});
});
});
});
</script>
This is the HTML code for the dropdowns:
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kawasan:</td>
<td><select name="pilih_kawasan" id="kawasan">
<option value="none">SILA PILIH</option>
<option value="kuching">KUCHING</option>
<option value="lundu">LUNDU</option>
<option value="sriaman">SRI AMAN</option>
<option value="betong">BETONG</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kuarter:</td>
<td><select name="pilih_kuarter" id="kuarter">
<option value="none-01"></option>
<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
<option value="lundu-01">JALAN SEKETI</option>
<option value="sriaman-01">JALAN FOO CHOW</option>
<option value="sriaman-02">JALAN SABU</option>
<option value="betong-01">JALAN TANJUNG ASSAM</option>
</select></td>
</tr>

The reason is that you are saving the value of the selected option in #kuarter, and not the text that's displayed in the e.g. the value for the option you are selecting is kuching-01:
<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
As other code depends on the value, you can't change the option value to match the text you want.
What we can do instead is save the text in a hidden input that will get submitted with the form. For this to work, the input has to have the same name as the option currently has, so that your processing code will recognise it.
To do this we need to:
Change the name of the select so that our new hidden input can use the name pilih_kawasan and sumbit the value for processing, e.g. <select name="pilih_kawasan_select" id="kawasan">
Add a hidden input to your form with the name pilih_kawasan to store the text, e.g.: <input type="hidden" name="pilih_kawasan" id="pilih_kawasan_value" value="">
Add javascript function to update the value of the hidden field #pilih_kawasan_value with the selected text (i.e. not value).
Call this function every time the #kuarter dropdown changes. This needs to be done in 2 places: when a new value is selected in #kuarter, and also when the value of 'kawasan' changes (because that changes the values in #kuarter).
Working snippet
The HTML & jQuery below are working here, run the snippet to see what its doing.
$(document).ready(function() {
var $options = $("#kuarter").clone();
$("#kawasan").change(function() {
var filters = [];
if ($(this).val() == "") {
$(this).find("option").each(function(index, option) {
if ($(option).val() != "")
filters.push($(option).val());
});
} else {
filters.push($(this).val())
}
$("#kuarter").html("");
$.each(filters, function(index, value) {
$options.find("option").each(function(optionIndex, option) {
if ($(option).val().startsWith(value)) {
$(option).clone().appendTo($("#kuarter"));
// (4.) ADDED: the #kuarter values have changed, so update the hidden input to the selected text
selected_text = $("#kuarter option:selected").text(); // get the text from the selected option
setKuarterValue(selected_text); // call our function to update the hidden input
}
});
});
});
// (4.) ADDED: Update the hidden input any time the #kuarter dropdown is changed
$("#kuarter").change(function() {
// get the text from the selected option in #kawasan
selected_text = $("#kuarter option:selected").text();
setKuarterValue(selected_text); // call our function to update the hidden input
});
});
/* (3.) function to set the values of the hidden input "#pilih_kuarter"
that will be submitted to your processing code. */
function setKuarterValue(myval) {
// if the value hasn't changed , no need to update
if ($("#pilih_kuarter").val() == myval) return;
// set the value of the hidden input with the selected text
$("#pilih_kuarter").val(myval);
// just for testing, so we can see the value that will be submitted - delete when its working for you
console.log ("Set pilih_kuarter value = "+ myval);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kawasan:</td>
<td>
<!-- (1.) UPDATED: Change the name of the select, as we're going to submit our hidden input using this name instead -->
<select name="pilih_kawasan" id="kawasan">
<option value="none">SILA PILIH</option>
<option value="kuching">KUCHING</option>
<option value="lundu">LUNDU</option>
<option value="sriaman">SRI AMAN</option>
<option value="betong">BETONG</option>
</select>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kuarter:</td>
<td>
<select name="pilih_kuarter_select" id="kuarter">
<option value="none-01"></option>
<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
<option value="lundu-01">JALAN SEKETI</option>
<option value="sriaman-01">JALAN FOO CHOW</option>
<option value="sriaman-02">JALAN SABU</option>
<option value="betong-01">JALAN TANJUNG ASSAM</option>
</select>
</td>
</tr>
<!-- (2.) ADDED: add a new hidden input to store the required text
this must have the name=pilih_kuarter so it will submit the value to you database -->
<input type="hidden" name="pilih_kuarter" id="pilih_kuarter" value="">
</table>

This is the result..the value in kuarter's should be in kawasan's value and the kawasan's value should in kuarter's value

Iterating over checkboxes in jQuery

I have a table with check-boxes, a dropdown, and other accompanying data.
I'd like to iterate over the rows that have been checked, and pull it's data, add that data into a dictionary, then into a master array.
It seems to be finding the correct rows with check boxes, but my for loop is not pulling each row properly. Here is my js code:
$("#thechecked").click(function(){
var send_list = []
$('#mytable').find(':checkbox:checked').each(function () {
var dict = {};
var value = $("#presetChoosen").val();
var filename = $("#filename").text();
dict['filename'] = filename
dict['value'] = value
send_list.push(dict)
});
console.log(send_list)
});
FULL EXAMPLE IN JSFIDDLE
What am I doing wrong?

You should not use the same ids everywhere like you did on the select element. Id's elements are meant to be unique.
I've used some jQuery methods(parent(), find(), next()) to target the specific values:
var value = $(this).parent().parent().find("select option:checked").val();
var filename = $(this).parent().next("td").text();
Below is a working snippet of what you're trying to achieve:
$("#thechecked").click(function() {
var send_list = []
$('#mytable').find(':checkbox:checked').each(function() {
var dict = {};
var value = $(this).parent().parent().find("select option:checked").val();
var filename = $(this).parent().next("td").text();
dict['filename'] = filename
dict['value'] = value
send_list.push(dict)
});
console.log(send_list)
});
tr,
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr id="mq">
<td><input type="checkbox" /></td>
<td>What</td>
<td>Meta</td>
<td>Preset</td>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox" /></td>
<td id="filename_1">Underthesea</td>
<td>1920x1080</td>
<td> <select id="presetChoosen_1">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="2">
<td><input type="checkbox" /></td>
<td id="filename_2">Overthehill</td>
<td>1280x720</td>
<td> <select id="presetChoosen_2" value="asd">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="3">
<td><input type="checkbox" /></td>
<td id="filename">Mocking</td>
<td>1280x720</td>
<td> <select id="presetChoosen" value="asd">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
</tbody>
</table>
<button id="thechecked">Get Checked</button>

You're re-using id attributes. IDs are supposed to be unique - and I believe it's actually a WC3 validation error to re-use the same ID in HTML.
You're also not scoping your selector to your checkbox at all.
Change your id="" to name="" and then try the following code concept:
$('#mytable').find('input[type="checkbox"]:checked').each(function () {
var tr = $(this).closest('tr'),
filename = tr.find('[name="filename"]').val();
// [...]
});

Once you get the checkbox (inside the loop), then you need to get the row for that checkbox, eg:
$("#thechecked").click(function(){
var send_list = []
$('#mytable :checkbox:checked').each(function () {
var row = $(this).closest("tr");
var value = row.find("#presetChoosen").val();
var filename = row.find("#filename").text();
var dict = {};
dict['filename'] = filename
dict['value'] = value
send_list.push(dict)
});
console.log(send_list)
});
bit hard to be 100% without your HTML (in the question) and it looks like you have elements with the same id, eg id='presetChoosen' on every row, which is advised against.

Like the accepted answer said, ids should be unique. What I would do is change filename and presetChoosen to classes instead, since they are a type of thing (class), not a particular thing (id). That way you could traverse the DOM in a more readable and easier to understand way:
$("#thechecked").click(function(){
var send_list = [];
$('#mytable').find(':checkbox:checked').each(function (index, checkbox) {
// Find the row this checkbox is in
var row = $(checkbox).closest('tr'),
value = row.find('.presetChoosen').val(),
filename = row.find('.filename').text();
send_list.push({
filename: filename,
value: value
});
});
console.log(send_list);
});
tr,td{border:1px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr id="mq">
<td></td>
<td>What</td>
<td>Meta</td>
<td>Preset</td>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox" /></td>
<td class="filename" >Underthesea</td>
<td>1920x1080</td>
<td> <select class="presetChoosen">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="2">
<td><input type="checkbox" /></td>
<td class="filename" >Overthehill</td>
<td>1280x720</td>
<td> <select class="presetChoosen">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="3">
<td><input type="checkbox" /></td>
<td class="filename" >Mocking</td>
<td>1280x720</td>
<td> <select class="presetChoosen">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
</tbody>
</table>
<button id="thechecked">Get Checked</button>

validate the dom using jquery

I am trying to validate the DONM using jquery Please look into the fiddle.
My objective is not to select the same country to same room number .
I have two scenarions
scenario 1 (before saving into DB)
The example is working fine
scenario 2 (After saving the data into db )
saved data coming from DB
Available Country RooNumber SelectedPerson
droipdown1 1
dropdown2 2 chennai
WRONG SELECTION
Available Country RooNumber SelectedPerson
chennai 1 chennai
chennai 2 chennai
JSFiddle:
http://jsfiddle.net/bharatgillala/9o1gxa1h/10/
code:
<table id="gridviewInfo" runatr="server">
<TBODY><TR>
<TH scope=col>Available Country</TH>
<TH scope=col>RooNumber</TH>
<TH scope=col>Selected</TH>
</TR>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico
</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
<TD style="WIDTH: 100px">1</TD>
<td>
<label id='lbl2'> maxico </label>
</td>
</TR>
<TR>
<TD style="WHITE-SPACE: nowrap" align=left>
<SELECT class="judges" id='ddlAvailableJudges2' name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
2
<td>
<label id='lbl2'>chennai</label>
</td>
</tr>
</table>

First of all, you're creating n label tags with the id lbl2.
This is happening, because you're developing with ASP.NET and you didn't create your label with the runat=server attribute, so it won't generate different label IDs for each label created.
Second, your code was too ugly / verbose, so I decided to make a complete new code to achieve what you want, and the snippet is below, full commented:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('select'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// initially, we want to change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
// then, we must disable this option in all the other dropdownlists
updateDisabled(ddl);
// so, we add a change event handler
ddl.addEventListener('change', function(e) {
// when the ddl value is changed, we update the label text
lbl.textContent = ddl.value;
// and we disable the option selected in all the other dropdownlists
updateDisabled(ddl);
});
});
function updateDisabled(ddl) {
// to disable all the other dropdownlists
// we loop through all the HTMLOptionElements inside the table
[].forEach.call(table.querySelectorAll('option'), function (opt, j) {
// we look if the current option inside the loop is not the selected one
if (opt.parentNode !== ddl) {
// then, if the option has the same selected value, we disable it, else we enable
opt.disabled = opt.value && opt.value === ddl.value;
}
});
}
});
})(document);
#gridviewInfo td:nth-child(1) {
white-space: nowrap;
text-align: left;
}
<table id="gridviewInfo" runatr="server">
<thead>
<tr>
<th>Available Person</th>
<th>RooNumber</th>
<th>SelectedPerson</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges1" name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>1</td>
<td>
<label>maxico</label>
</td>
</tr>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges2" name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>2</td>
<td>
<label>hongkong</label>
</td>
</tr>
</tbody>
</table>
Update
Since the OP asked, I've created a fiddle for him: http://jsfiddle.net/h1b6e8zm/

Add disabled to form option that are on the table list

I have a table and a form with a dropdown:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
and I want to add a disabled attribute to every option on the dropdown that is already on the table resulting in this:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple" disabled>Apple</option>
<option value="Banana">Banana</option>
<option value="Orange" disabled>Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
Is there any way to achieve using jQuery?

$("td.text").text(function(i, txt) {
$("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});
DEMO: http://jsfiddle.net/322PA/

Get each item value from the select option and compare it with the data inside table row. If both matches then disable the data/option in dropdownlist/select element.
$(document).ready(function(){
//loop through the select option
$("form > select").children().each(function(){
//store each option to check later
var item = $(this).val();
//loop through table row
$("table").children().each(function(){
//loop through table data
$("tr").children().each(function(){
//compare previously stored item with table data value
if(item == $(this).text()){
//disable option
$("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
}
});
});
});
});
jsFiddle Demo

I am guessing you will be dynamically changing the content of the table and want the select element to update when the table changes. You must therefore make sure it updates each time it's used.
$("#theSelector").bind("mouseenter", disableOptions);
function disableOptions() {
var tableData = [];
$("#theTable tr").each(function() {
tableData.push($(this).children(":first").text());
});
$("#theSelector option").each(
function() {
if(jQuery.inArray(this.text, tableData) > -1) {
$(this).prop('disabled', true);
}
}
);
}