multiple selects with same value do this - javascript

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">

Related

How to select only one row in table with checkbox

I have a table with x numbers of rows and 4 columns, one column is checkbox and other three are readonly selectboxs. I want the user to select just 1 row to be editable by checking checkbox in first column then if he check another checkbox in another row, the checkbox he previously checked get unchecked and row get readonly again.
So I want the user to select 1 row only to edit and others be readonly.
here is my code but it is not working.
$(document).ready(function(){
$('.col1, .col2, .col3').attr('disabled', true)
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function () {
$(this).find('.selectRow').each(function () {
var checkedRow = $(this).closest('tr').find('input:checkbox:checked'),
col1 = $(this).closest('tr').find('.col1'),
col2 = $(this).closest('tr').find('.col2'),
col3 = $(this).closest('tr').find('col3');
if (checkedRow){
$('.col1, .col2, .col3').removeAttr('disabled')
checkedRow.siblings().prop('checked', false);
}else{
$('.col1, .col2, .col3').attr('disabled', true)
checkedRow.siblings().prop('checked', false);
}
});
});
}
});
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
this is my code:
Without jQuery and using event delegation things may be somewhat simpler:
document.addEventListener(`click`, handle);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
function handle(evt) {
// only do something if a checkbox was clicked
if (evt.target.type === `checkbox`) {
const isChecked = evt.target.checked;
const selectedRow = evt.target.closest(`tr`);
// reset checkboxes, row coloring and disabled state
document.querySelectorAll(`input[type='checkbox']`)
.forEach(cb => {
cb.checked = cb !== evt.target ? false : isChecked;
const row = cb.closest(`tr`);
row.classList[isChecked && row === selectedRow ?
`add` : `remove`](`selected`);
[...row.querySelectorAll(`select`)].filter(r => r !== selectedRow)
.forEach(s => s.setAttribute(`disabled`, true));
selectedRow.querySelectorAll(`select`)
.forEach(s => s[isChecked ?
`removeAttribute` : `setAttribute`](`disabled`, true));
});
}
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
Here's an even more simplified version, acting on the table rows
document.addEventListener(`click`, handle);
// create the table dynamically to keep demo lean
createTable();
function handle(evt) {
if (evt.target.type === `checkbox`) {
const selectedRow = evt.target.closest(`tr`);
document.querySelectorAll(`tr`)
.forEach( row => {
// not selected
if (row !== selectedRow) {
row.querySelector(`[type=checkbox]`).checked = false;
row.classList.remove(`selected`);
return row.querySelectorAll(`select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
// selected
row.classList[[`remove`, `add`][+evt.target.checked]](`selected`);
row.querySelectorAll(`select`).forEach(s =>
s[`${[`set`,`remove`][+evt.target.checked]}Attribute`](`disabled`, true));
});
}
}
function createTable() {
const table = document.createElement(`table`);
const repeat = (str, n) => Array(n + 1).join(str);
const select = `<td><select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>E</option></select></td>`;
const row = `<tr>
<td><input type="checkbox" /></td>
${repeat(select, 3)}</tr>`;
table.insertAdjacentHTML(`beforeend`, repeat(row, 3));
document.body.appendChild(table);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
tr td:nth-child(1) {
padding-right: 6px;
}
The issue is because checkedRow holds a jQuery object. When you use that in an if condition it will always equate to true. You instead need to get the checked property from that element and use that in the condition instead.
Also note that the logic can be made much more succinct and extensible through the use of common selectors instead of incremental ones. In addition, you should look to add the disabled attribute to the HTML directly. Adding it via JS means that there will be a visible flash where the element is loaded as enabled, then when the DOM loads it will be disabled which is not good for your UX.
jQuery($ => {
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function() {
let $row = $(this);
let $checkbox = $row.find('.selectRow');
$row.find('select').prop('disabled', !$checkbox.prop('checked'));
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1" disabled="disabled">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled="disabled">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled="disabled">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
This works great! uncheck all checkboxes except the one having current focus '.tbl [type="checkbox"]:not(:focus)' then manipulate the select boxes
$(document).ready(function(){
$('.tbl [type="checkbox"]').on('click', function() {
$('.tbl [type="checkbox"]:not(:focus)').prop('checked', false);
$('.tbl select').attr('disabled', true);
$(this).parent().parent().find('select').attr('disabled', !$(this).prop('checked'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1" disabled>
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled>
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled>
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

Show input from the second select option

I'm having trouble showing input after the user selects an option from the second select menu option. Also whenever the user selects any of the second select options it has should show their input.
Sorry about the confusing title, but basically my question is how do I use the selection from one dropdown menu to decide which dropdown menu shows up next? I want to do something like this:
Select menu
option #1
option #2
option #3
Selecting option #2 would open another select menu:
sub-option #1.1
sub-option #1.2
sub-option #1.3
and then when the user select option from would open another select option 2 it will show label of what is select and input box so the user can input text
$("[data-child]").change(function() {
const selectedGroup = $(this).val();
var $childSelect = $("#" + $(this).attr("data-child"));
value = $childSelect.find('option').hide()
.filter(function(i, e) {
return $(e).val().startsWith(selectedGroup)
}).show().eq(0).val();
$childSelect.val(value);
$childSelect.trigger('change');
});
$("[data-child]").eq(0).trigger('change');
//codes for input
$(document).ready(function() {
$("#niv1").change(function() {
if ($(this).find("option:selected").val() == "1-1-2") {
$("#other").removeAttr("disabled")
} else {
$("#other").attr("disabled", "disabled")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="" frmContact "" method="post" action="" enctype="multipart/form-data">
<div class="banner">
<h1>ID Service Request Form</h1>
</div>
<p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
<fieldset>
<legend>Request Type</legend>
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Select a option:</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category</option>
<option value="a">AS400</option>
<option value="w">Windows</option>
<option value="o">Outlook</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Select a option:</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category</option>
<!-- AS400 -->
<optgroup data-rel="a">
<option value="1">Modify Account</option>
<option value="2">New AS400 Account</option>
<option value="3">Change Deapartment</option>
<option value="3">Reset Password</option>
</optgroup>
<!-- windows -->
<optgroup data-rel="w">
<option value="1">Create Domain ID</option>
<option value="2">Access to Particular Folder/Drive</option>
</optgroup>
<!-- Outlook -->
<optgroup data-rel="o">
<option value="1">Plish Mail</option>
<option value="2">Notification</option>
</optgroup>
</select>
</td>
</tr>
<tr>
</tr>
</table>
</fieldset>
</form>
Consider the following example.
$(function() {
$("#category1").change(function() {
var selected = $(this).val();
if (selected == "") {
$("#category2").prop("disabled", true);
} else {
$("#category2 optgroup").hide();
$("#category2 > option").not(":first").remove();
var options = $("#category2 optgroup[data-rel='" + selected + "']").children().clone().appendTo("#category2");
$("#category2").prop("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="" frmContact "" method="post" action="" enctype="multipart/form-data">
<div class="banner">
<h1>ID Service Request Form</h1>
</div>
<p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
<fieldset>
<legend>Request Type</legend>
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Select a option:</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category</option>
<option value="a">AS400</option>
<option value="w">Windows</option>
<option value="o">Outlook</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Select a option:</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category</option>
<!-- AS400 -->
<optgroup data-rel="a">
<option value="1">Modify Account</option>
<option value="2">New AS400 Account</option>
<option value="3">Change Deapartment</option>
<option value="3">Reset Password</option>
</optgroup>
<!-- windows -->
<optgroup data-rel="w">
<option value="1">Create Domain ID</option>
<option value="2">Access to Particular Folder/Drive</option>
</optgroup>
<!-- Outlook -->
<optgroup data-rel="o">
<option value="1">Plish Mail</option>
<option value="2">Notification</option>
</optgroup>
</select>
</td>
</tr>
<tr>
</tr>
</table>
</fieldset>
</form>
This shows and hides selected categories in #category2 when #category1 is changed.

Navigating around html table

I have a html table 40 x 20. each cell is filled with a selector. each selector has 4 options.
At the moment i have to select by using the mouse each value. is there a way to set it so that i can click and drag the mouse over a group of cells at a timed then press the value on the key board to choose that option for all those cells.
Also it would be really handy if there was a way to set it so I could change the selected cell using the keyboard arrows.
does anyone know a way for both or either of these above?
a little sample of how my table is set up:
<tr id="row_1">
<td> row 1</td>
<td id="row_1_col_1">
<center>
<select style="background-color: #ceedd0;" id="row_1_select_1" onchange="changeSelect('row_1','_col_1','_select_1')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_2">
<center>
<select style="background-color: #ceedd0;" id="row_1_select_2" onchange="changeSelect('row_1','_col_2','_select_2')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_3">
<center>
<select style="background-color: #ceedd0;" id="row_1_select_3" onchange="changeSelect('row_1','_col_3','_select_3')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
a small trick you can go with, using a hidden checkbox, and bind event on it,,
just try the snippet.
(click on "Select" of each and try to change one of them.)
var slct = document.querySelectorAll('.hidden');
var func = document.querySelectorAll('select');
var i, x, chng;
for (i = 0; i < func.length; i++) {
func[i].onchange = function() {
chng = this.selectedIndex;
for (x = 0; x < slct.length; x++) {
if (slct[x].checked) {
slct[x].nextSibling.nextSibling.selectedIndex = chng;
}
}
}
}
.hidden {
display: none;
}
label {
background: lightgray;
padding: 0.10rem 2rem;
}
.hidden:checked~label {
background: powderblue;
color: white;
}
<tr id="row_1">
<td> row 1</td>
<td id="row_1_col_1">
<center><input type="checkbox" id="toggle" class="hidden"><label for="toggle">Select</label><select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_2">
<center><input type="checkbox" id="toggle2" class="hidden"><label for="toggle2">Select</label><select style="background-color: #ceedd0;" id="row_1_select_2" onchange="changeSelect('row_1','_col_2','_select_2')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_3">
<center><input type="checkbox" id="toggle3" class="hidden"><label for="toggle3">Select</label><select style="background-color: #ceedd0;" id="row_1_select_3" onchange="changeSelect('row_1','_col_3','_select_3')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
EDIT: as per your request, i added another snippet to use the selectionbox using span without Checkbox. also added multi select when mouse-down over the spans just try
click and hold mousedown then move across the elements,
and try single clicks
I hope this meets what exactly you need.
var tgl = document.querySelectorAll('#selectbox');
var func = document.querySelectorAll('select');
var i, x, chng, actv;
var mouseDown = false;
for (i = 0; i < func.length; i++) {
func[i].addEventListener('change', function() {
var slct = document.querySelectorAll('.activated');
chng = this.selectedIndex;
for (x = 0; x < slct.length; x++) {
slct[x].firstElementChild.selectedIndex = chng;
}
});
}
tgl.forEach((span) => {
span.addEventListener('click', function() {
actv = this;
if (actv.classList.contains('activated')) {
actv.classList.remove('activated');
} else {
actv.classList.add('activated');
}
});
span.addEventListener('mouseover', function() {
this.onmousedown = function() {
mouseDown = true
};
document.onmouseup = function() {
mouseDown = false;
};
if (mouseDown) {
if (this.classList.contains('activated')) {
this.classList.remove('activated');
} else {
this.classList.add('activated');
};
};
});
});
#selectbox {
position: relative;
display: block;
width: 4rem;
border: 1px dashed green;
}
.activated {
background: rgba(0, 0, 10, 0.1);
}
#selectbox:hover {
background: powderblue;
}
<tr id="row_1">
<td> row 1</td>
<td id="row_1_col_1">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_2">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>

show multi select id by js

I need show selection id by js, by this code only show 1 and first select id
my code is this html and javascript
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
</tr>
<script>
$(document).ready(function(){
$('#jens_id').change(function(){
statteId = $("#jens_id").val()
alert(statteId);
});
});
</script>
can help for edit script
The id attribute should be unique within the page otherwise only the first one gets selected(using id selector), for a group of elements use a common class instead and within the change event handler use this to refer the clicked element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td></td>
</tr>
</table>
<script>
$(document).ready(function() {
// or use attribute equals selector
// $('[name="jens_id[]"]')
$('.jens_id').change(function() {
statteId = $(this).val(); // or this.value
console.log(statteId);
// get the td and update with value
$(this).parent().next().text(statteId);
});
});
</script>
Try with each() function of jquery .And change the selector with Tagname or ClassName instead of id .Id is a unique for full document
$(document).ready(function() {
$('select').each(function(){
console.log($(this).val())
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option selected>1</option>
<option >2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >1</option>
<option selected>2</option>
</select>
</td>
</tr>
$(document).ready(function() {
$('.jens_id').change(function() {
statteId = $('option:selected', this).text()
alert(statteId);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >3</option>
<option >4</option>
</select>
ID should be unique, use class and use this context to tell the current changed select
You are already aware now that id of the element on page should be unique.
When you have multiple elements with same id then id(#) selector returns the first matched element. So as mentioned in other answers you should use class if possible.
By any reason if you can't use the class and want to find with id then you can use it like $('select#jens_id') or $('[id="jens_id"]') and to get the selected option use context to this which will find the selected option for changed select element.
$(document).ready(function() {
$('select#jens_id').change(function() {
alert($(this).find('option:selected').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >3</option>
<option >4</option>
</select>
Add multiple attribute to select if multiple values needs to be selected.

Hide dropdown box while entering value in the textarea

I am trying to hide a Dropdown Box with JavaScript once someone is entering text inside a textarea.
This is what I did so far:
HTML
<table>
NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br>
<select name="select86" id="travel_arriveVia" onchange='CheckColors86(this.value);'>
<option>Select</option>
<option value="Cattle">Cattle</option>
<option value="Buffalo">Buffalo</option>
<option value="Horse">Horse</option>
<option value="Camel">Camel</option>
<option value="Dog">Dog</option>
<option value="Sheep">Sheep</option>
<option value="Pig">Pig</option>
<option value="Goat">Goat</option>
<option value="Deer">Deer</option>
<option value="Others">Others</option>
</select>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<textarea rows="3" cols="25" name="div86" id="color86" style='display:none'></textarea>
</td>
</tr>
</table>
JavaScript
function CheckColors86(val)
{
var element=document.getElementById('color86');
if(val=='Others')
element.style.display='block';
else
element.style.display='none';
}
function CheckColors86(val)
{
var element=document.getElementById('color86');
if(val=='Others')
element.style.display='block';
else
element.style.display='none';
}
function hideDropDown(){
var element=document.getElementById('travel_arriveVia');
element.style.display='none';
}
function showDropDown(){
var element=document.getElementById('travel_arriveVia');
element.style.display='block';
}
<table>
NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br>
<select name="select86" id="travel_arriveVia" onchange='CheckColors86(this.value);'>
<option>Select</option>
<option value="Cattle">Cattle</option>
<option value="Buffalo">Buffalo</option>
<option value="Horse">Horse</option>
<option value="Camel">Camel</option>
<option value="Dog">Dog</option>
<option value="Sheep">Sheep</option>
<option value="Pig">Pig</option>
<option value="Goat">Goat</option>
<option value="Deer">Deer</option>
<option value="Others">Others</option>
</select>
<tr>
<td></td><td></td><td></td>
<td>
<textarea rows="3" cols="25" name="div86" id="color86" onfocus='hideDropDown()'></textarea>
</td>
</table>
Hope this helps you out.
If you can use jQuery you can do it like that:
$('#color86').keyup(function() {
$('#travel_arriveVia').css('display', 'none');
});
Here the jsfiddle:
https://jsfiddle.net/ezd5ajmf/
Or as Snippet:
$('#color86').keyup(function() {
$('#travel_arriveVia').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br>
<select name="select86" id="travel_arriveVia">
<option>Select</option>
<option value="Cattle">Cattle</option>
<option value="Buffalo">Buffalo</option>
<option value="Horse">Horse</option>
<option value="Camel">Camel</option>
<option value="Dog">Dog</option>
<option value="Sheep">Sheep</option>
<option value="Pig">Pig</option>
<option value="Goat">Goat</option>
<option value="Deer">Deer</option>
<option value="Others">Others</option>
</select>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<textarea rows="3" cols="25" name="div86" id="color86"></textarea>
</td>
</table>
Add the following function in java script and call it on keyup event as below
<textarea rows="3" cols="25" name="div86" id="color86" style='display:none' onkeyup="toggleListOption();"></textarea>
function toggleListOption(){
var el=document.getElementById('color86');
if(el.value===""){
document.getElementById('travel_arriveVia').style.display='block';
}else{
document.getElementById('travel_arriveVia').style.display='none';
}
}

Categories