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>

Hidden div appear on table option select

I have a page with a form and questions of these forms are asked on two separate tables. I want to make the second table appear only if One, Two or Three is selected from the first table, and be invisible by default. If Zero is selected again, table 2 disappears again.
I got it to partially work with the code below, however I think my script is cancelling each other out. I can get it to work with One, Two or Three, but not all three selections. In this case, table 2 only appears when I select "Three", and nothing happens when Zero, One and Two is selected.
How would I go about changing the script to let it appear when One, Two or Three are selected and disappear when Zero is selected once again.
<table>
<tr>
<td>Numbers</td>
<td>
<select id="numbers" name="numbers">
<option value="Zero" selected>0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
</select>
</td>
</tr>
</table>
<span id="animals" style="display: none;">
<table>
<tr>
<td>Animal</td>
<td>
<select id="animal" input name="animal">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</td>
</tr>
</table>
</span>
<script>
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'One' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'Two' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'Three' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
</script>

using Array include, check code snippet.
<html>
<body>
<table>
<tr>
<td>Numbers</td>
<td>
<select id="numbers" name="numbers">
<option value="Zero" selected>0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
</select>
</td>
</tr>
</table>
<span id="animals" style="display: none;">
<table>
<tr>
<td>Animal</td>
<td>
<select id="animal" input name="animal">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</td>
</tr>
</table>
</span>
<script>
function checkVals(val){
if(!val) {
val = document.getElementById('numbers').value;
}
var allowed = ["One", "Two", "Three"];
var check = allowed.includes(val);
if(check){
document.getElementById('animals').style.display = 'block';
}else{
document.getElementById('animals').style.display = 'none';
}
}
document.getElementById('numbers').addEventListener('change', function () {
var val = this.value;
checkVals(val);
});
window.onload="checkVals()";
</script>
</body>
</html>

You do not need to write three event listeners. Just one can do this.
document.getElementById('numbers').addEventListener('change', function () {
var style = (this.value == 'One' || this.value == 'Two' || this.value =='Three') && (this.value != 'Zero') ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});

jquery button enable if checkbox and select option

How do I enable the button if one or more checkbox is checked and if the select option of the checked checkbox is not equal to "no action"? Treating it as a row of table with checkbox being first element and select as last element?
This is how I am checking checkbox values.
<script>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
submitButt.attr("disabled", "disabled");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
//dynamically generating rows
for ws in my_zones:
html_output += \
''''<tr><td><input type="checkbox" name="checkboxes" value="%s"/></td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>
<select name="action">
<option value='no action'>Choose Action</option>
<option value='scan'>Reboot</option>
<option value='swap'>Rebuild</option>
<option value='terminate'>Terminate</option>
</select></td></tr>''' \
% (.......)

At each check state change, verify what you want: if there at least one checkbox checked and if the "no action" checkbox is not checked. Then you can enable the submit button, or otherwise disable it.
function updateSubmitButtonState(){
var enableableLineCount= 0;
$("tr").each(function(){
if( isEnableableLine( this ) )
enableableLineCount++;
});
if( enableableLineCount > 0 )
$('[type="submit"]').removeAttr("disabled");
else
$('[type="submit"]').attr("disabled","disabled");
function isEnableableLine( tr ){
if(
$("input[type='checkbox']", tr).is(":checked") &&
$("select option[value='no-action']:selected", tr ).length == 0
)
return true;
else
return false;
}
}
$("input[type='checkbox']").on("click",updateSubmitButtonState );
$("select").on("change",updateSubmitButtonState );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" name="checkbox-group">
</td>
<td>
<select>
<option value="option1">option 1 </option>
<option value="option2">option 2 </option>
<option value="no-action">no-action</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox-group">
</td>
<td>
<select>
<option value="option1">option 1 </option>
<option value="option2">option 2 </option>
<option value="no-action">no-action</option>
</select>
</td>
</tr>
</table>
<input type="submit" disabled="disabled" value="Submit" id="submit" />
edit
I have adapted the snippet to fit the goals described in coments.
Now, at each change, the whole table is parsed. If there not hundred of line, it could be sufficient. But it is not very optimised.

https://jsfiddle.net/gzrv8v3q/13/
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
submitButt.attr("disabled", "disabled");
$('#form1').change(function() {
var disable = true
if ( $('#select').val() != "no-action") {
checkboxes.each(function() {
if ($(this).is(":checked")) {
disable = false
}
})
}
submitButt.attr('disabled', disable);
})

The disabled attr must be deleted. Even it existing makes it disabled. I use: https://api.jquery.com/removeAttr/
Also, your code will not add disabled back again if the checkbox is unchecked, also clarify if that is part of your question.

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);
}
}
);
}

how to display selected value from dropdownlist to label using javascript

I have 3 drop-down lists in my form. I want to display the selected value from each dropdown list to my label. The problem is that only one dropbox list will display, while the other two won't.
Here is my code:
<script>
window.onload = function()
{
document.getElementsByName('mydropdown')[0].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
</script>
this is my html
<td><select name="mydropdown" id="mydrop" onchange="">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>
<td><select name="mydropdown" id="mydrop">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select>
<td><label id="mylabel"></label></td>

You're only binding the zeroth element (the one you selet) with [0]. You need to bind to all of them, possibly like so:
Array.prototype.forEach.call(document.getElementsByName('mydropdown'),
function (elem) {
elem.addEventListener('change', function() {
document.getElementById('mylabel').innerHTML = this.value;
});
});
http://jsfiddle.net/UNLnx/
By the way you are reusing the same ID on multiple elements which is invalid.

Update: Working example: http://jsfiddle.net/x8Rdd/1/
That's because you are only setting the onchange event for the first element in your "mydropdown" group.
<script>
window.onload = function()
{
var dd = document.getElementsByName('mydropdown');
for (var i = 0; i < dd.length; i++) {
dd[i].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
}
</script>
Or something like that. If you're using jQuery then you can set the onchange property for all of them without the loop.