We Keep Coding

multiple selects with same value do this

i have diferent select options with the same values in a table.
how do i make that when all selects get the same value ("2") do something (add disabled atributte to an input)?
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">

Read the values into an array values. If all of the values are 2 the disable the checkbox using .prop('disabled', true):
$('.class1').on('change', function() {
let values = $('.class1').map(function() {
return +this.value;
}).get();
values.some(checkValue) || $('#x').prop('disabled', true);
});
function checkValue( value ) {
return value !== 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">

You can do it as follows: Push the value of each select in an array and use unique() to only keep unique values. In case you want to disable the input if the values of the selects are the same (either 1 or 2), disable the input if the length of this array is 1.
$("select").on("change", function() {
let a = [];
$("select").each(function() {
a.push($(this).val());
$.unique(a);
});
if (a.length === 1) {
$(".checkbox").attr("disabled", true);
}
else {
$(".checkbox").removeAttr("disabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">
In case you only want to disable the input when the values of all selects are 2, you can do it as follows:
$("select").on("change", function() {
let a = [];
$("select").each(function() {
a.push($(this).val());
$.unique(a);
});
if (a.length === 1 && $.inArray("2", a !== -1)) {
$(".checkbox").attr("disabled", true);
}
else {
$(".checkbox").removeAttr("disabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">

two select options - validate and hide option not needed

I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.
Example:
Any advice how to hide the other options which are not used
if TV show only value device, tsignal, blackscreen, other
If Radio show only the value: device, rsignal, other
$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>

I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?
$('#test').change(function() {
const options = $('#new').find('option').show();
if ($(this).val() === 'tv') {
options.not('[value="device"]').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
Notice Hide option is not cross browser

Highlighting the matching html cell with select box

I'd like to highlight the html cell with the matching value with the selectbox at the top. At the moment it only highlights the row. Can I get a little help, please?
What I try to do here is when a number is selected from selectbox, the corresponding cell with the matching value to be highlighted. I'd like to highlight more than one cell at the same time. Notice that they are two different tables.
This is my jsfiddle.
Here is the html code:
<div id="wrapper">
<table class="table1">
<tr>
<td><select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td><select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Css code:
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
Jquery code:
$("#list1").change(function () {
var index = this.value - 1;
var $rows = $('.row', '.table2');
$rows.css('background-color', '');
$('.row', '.table2').eq(index).css('background-color', 'yellow');
});

You could achieve this by using the .each() method to iterate over all cells, testing for value matches on each cell base on the currect <select /> value. Something along the lines of this might work for you:
// Apply to all selectors
$("select").change(function () {
// Extract the index of the select being interacted with
var selectIndex = $(this).parent().index();
var value = $(this).val();
// Iterate each cell of the table
$('td', '.table2').each(function() {
// If the cell index matches the index of the corresponding
// selected drop down then update it's background color
if($(this).index() === selectIndex) {
// If a value match is found, apply background color. Other
// wise clear the background color
if($(this).attr('value') == value) {
$(this).css('background-color', 'yellow');
}
else {
$(this).css('background-color', '');
}
}
})
});
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div id="wrapper">
<table class="table1">
<tr>
<td>
<select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td>
<select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Hope this helps! (here's a jsfiddle as well)

Javascript/jQuery not working in Firefox, Safari and IE. Fine in Opera and Chrome

I'm using some code that worked fine just a couple of weeks ago, I got it from here and checked before using. For some reason it now only works in Chrome and Opera, even the original on jsfiddle. I'm sure I tested in Firefox first, like allways. I'm completely baffled.
The options of the 2nd drop down are supposed to be dependent on the selection of the first.
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="home_ware">Home Ware</option>
<option value="education">Education</option>
<option value="books">Books</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" id="category2" name="category2">
<option value>Select Category2</option>
<!-- Home Ware -->
<option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
<option rel="home_ware" value="audio-video">Audio/Video</option>
<option rel="home_ware" value="beddings">Beddings</option>
<option rel="home_ware" value="camera">Camera</option>
<option rel="home_ware" value="cell-phones">Cell Phones</option>
<!-- Education -->
<option rel="Education" value="Colleges">Colleges</option>
<option rel="Education" value="Institutes">Institutes</option>
<option rel="Education" value="Schools">Schools</option>
<option rel="Education" value="Tuitions">Tuitions</option>
<option rel="Education" value="Universities">Universities</option>
<!-- Books -->
<option rel="Books" value="College Books">College Books</option>
<option rel="Books" value="Engineering">Engineering</option>
<option rel="Books" value="Magazines">Magazines</option>
<option rel="Books" value="Medicine">Medicine</option>
<option rel="Books" value="References">References</option>
</select>
</td>
</tr>
</table>
</form>
$(function(){
var $cat = $("#category1"),
$subcat = $("#category2");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});
});
http://jsfiddle.net/v917ycp6/5/

Your code works on Firefox and internet explorer (safari not tested.)
please make sure that you have jQuery included before the code gets executed.
also check the console for any errors pointing towards the problem.
also the javascript needs to be in a <script> tag if it is not in an .js file.
if this doesn't help feel free to provide more details.
P.S. I need 50 reputation for commenting. so i will provide this as an answer although it probably doesn't answer your question.

Hiding/Showing options might behave strangely in some browsers. Probably due to differences in the way related APIs are implemented. Here is an example using same logic from a previous answer. This should work fine in all browsers.
Instead of hide/show options are cached in first select using jQuery data(). When first option changes options are filtered from this cache and updated by updating the entire options list instead of show/hide.
$(function() {
$("#category1").on('change', function() {
if (!$(this).data('options')) {
$(this).data('options', $('#category2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[rel=' + id + ']');
if (options.length) {
$('#category2').html(options).prop('disabled', false);
} else {
$('#category2').html($('<option value>No subcategory found</option>')).prop('disabled', true);
}
});
});
#category2 option {
display: none;
}
#category2 option.label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formname" name="formname" method="post" action="submitform.asp">
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="home_ware">Home Ware</option>
<option value="Education">Education</option>
<option value="Books">Books</option>
<option value="Unknown">No subcategory</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" id="category2" name="category2">
<option value>Select Category2</option>
<!-- Home Ware -->
<option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
<option rel="home_ware" value="audio-video">Audio/Video</option>
<option rel="home_ware" value="beddings">Beddings</option>
<option rel="home_ware" value="camera">Camera</option>
<option rel="home_ware" value="cell-phones">Cell Phones</option>
<!-- Education -->
<option rel="Education" value="Colleges">Colleges</option>
<option rel="Education" value="Institutes">Institutes</option>
<option rel="Education" value="Schools">Schools</option>
<option rel="Education" value="Tuitions">Tuitions</option>
<option rel="Education" value="Universities">Universities</option>
<!-- Books -->
<option rel="Books" value="College Books">College Books</option>
<option rel="Books" value="Engineering">Engineering</option>
<option rel="Books" value="Magazines">Magazines</option>
<option rel="Books" value="Medicine">Medicine</option>
<option rel="Books" value="References">References</option>
</select>
</td>
</tr>
</table>
</form>

How to change an option value in one field by changing the option value in another

Here's my code, my question will follow.
<tr>
<td><h5>Race:</h5></td>
<td class="top" colspan="2"><select name="race">
<option value="empty_r">*Choose</option>
<option value="Humans">Humans</option>
<option value="Orcs">Orcs</option>
</select><?php if (!empty($errors[7])) echo "$errors[7]"; ?>
</td>
</tr>
<tr>
<td><h5>Faction:</h5></td>
<td class="top" colspan="2"><select name="faction">
<option value="empty_f">*Choose</option>
<option value="Human_Faction1">Human Faction 1</option>
<option value="Orc_Faction1">Orc Faction 1</option>
</select><?php if (!empty($errors[8])) echo "$errors[8]"; ?>
</td>
</tr>
I want to make it so that when I choose humans as my race, only the human faction 1 will display in the faction select field. And if i choose Orcs as my race, only the orc faction 1 will display as an option. I tried to do this using just PHP but with no luck. I won't learn any javascript until this coming semester!

<script>
function human_faction()
{
document.getElementById("show").innerHTML=" <option value='empty_f'>*Choose</option> <option value='Human_Faction1'>Human Faction 1</option>";
}
function orcs_faction()
{
document.getElementById("show").innerHTML=" <option value='empty_f'>*Choose</option> <option value='Orc_Faction1'>Orc Faction 1</option>";
}
</script>
<tr>
<td><h5>Race:</h5></td>
<td class="top" colspan="2"><select name="race">
<option value="empty_r">*Choose</option>
<option value="Humans" onclick="human_faction()">Humans</option>
<option value="Orcs" onclick="orcs_faction()">Orcs</option>
</select>
</td>
</tr>
<tr>
<td><h5>Faction:</h5></td>
<td class="top" colspan="2"><select id="show" name="faction">
<option value="empty_f">*Choose</option>
</select>
</td>
</tr>