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
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)
My objective is to get the value from span and assign the value to the dropdown on the same row.
Here is my jsFiddle: http://jsfiddle.net/bharatgillala/581hk9Ly/4/
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
My objective is to loop through all the spans and if there is any text, get the text and assign the text to the closest dropdown.
I've already answered that for you yesterday. The code is fully commented below:
(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('.judges'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
});
});
})(document);
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
And here is your fiddle updated: http://jsfiddle.net/581hk9Ly/6/
And if you want a jQuery version:
$(document).ready(function() {
$('.spanclass').each(function() {
$(this).closest('tr').find('.judges').val($(this).text());
});
});
I need a little help here. I am trying to show / hide div content on select of a jump menu. I can't seem to get the code to work. Here is my code:
JS:
function toggleOther(chosen){
if (chosen == 'cat') {
document.getElementById('categories').style.visibility = 'visible';
} else {
document.getElementById('categories').style.visibility = 'hidden';
document.myform.other.value = '';
}
And my page:
<td class="formlabel" nowrap="nowrap"><form name="Users">Users:</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" onchange="toggleOther( document.myform.values.options[document.myform.values.selectedIndex ].value );" class="select" >
<option selected="selected">Choose</option>
<option>All Users</option>
<option value="cat">User 1</option>
<option value="cat">User 2</option>
<option value="cat">User 3</option>
<option value="cat">User 4</option>
<option value="cat">User 5</option>
</select></td>
<div style="opacity: 0.3; background: #fff; display:none">
<td width="380" valign="top" class="center">
<table width="360" class="imagetable" cellpadding="0" cellspacing="0" id="categories">
<tr>
<th colspan="2" nowrap="nowrap" class="reportname">Categories</th>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap"><form name="Exams">Exams</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" class="select">
<option value="#" selected="selected" target="_blank">Choose</option>
<option value="">All Exams</option>
<option value="">Exam 1</option>
<option value="">Exam 2</option>
<option value="">Exam 3</option>
<option value="">Exam 4</option>
<option value="">Exam 5</option>
</select></td>
</tr>
</form>
<tr>
<td nowrap="nowrap" class="formlabel">Include Categories</td>
<td nowrap="nowrap" class="formlabel"><input type="text" name="textfield2" id="textfield2" class="fields" size="4" />or more items assigned</td>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap">Display Categories</td>
<td nowrap="nowrap" class="formlabel">that appear
<input type="text" name="textfield3" id="textfield3" class="fields" size="4" />or more exams</td>
</tr>
</table>
Any help here? I cannot seem to get it to work...
To hide:
document.getElementById('categories').style.display="none"
To show:
document.getElementById('categories').style.display=""
It is better to use the jquery's .toggle() method. You save time and it is nicer since you can do effects
http://api.jquery.com/toggle/
you could just do
$(#categories).toggle(); //to show or hide the id = "categories"
I have an HTML table which is poulated by a user. The first colum in the row has a drop down box where they select an option generated by a mysql database.
This is for an orders table and the order could consist of 1 row to 72 rows. When the form loads, I only want 1 row to be displayed. When the select an option on the first row, the second row must appear. when an option is selected from the 2nd row, the 3rd row appears. and all the way to the end where row 72 only appears if an option is selected from row 71.
I hope this makes sense.
Below is my HTML table ( for 5 rows only)
<table>
<tr>
<td>
<select name="users" onchange="showUser(1, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint1"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(2, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint2"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(3, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint3"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(4, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint4"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(5, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint5"><b>SKU Details will be seen here</b></div>
</td>
</tr>
</table>
I know this is not a coding forum but I have searched the net for a while for a relevant example and found nothing. my javascript knowledge is very verly limited, if someone could point me in the right direction it would be greatly appreciated.
Thanks and regards,
Ryan Smith
Update 17 Jan 2012.
Below please find a simplified script which I cannot get to work correctly.
<html>
<head>
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+index).style.display="block"
}
</script>
</head>
<body>
<table>
<tr id="r1">
<td><select name="users" onchange="showUser(1, this.value)">
<OPTION VALUE=1>
1
</option>
<OPTION VALUE=2>
2
</option>
<OPTION VALUE=3>
3
</option>
</SELECT>
</td>
</tr>
<tr id="r2" style="display:none;">
<td><select name="users" onchange="showUser(2, this.value)">
<OPTION VALUE=1>
1
</option>
<OPTION VALUE=2>
2
</option>
<OPTION VALUE=3>
3
</option>
</SELECT>
</td>
</tr>
</tr>
<tr id="r3" style="display:none;">
<td><select name="users" onchange="showUser(3, this.value)">
<OPTION VALUE=1>
1
</option>
<OPTION VALUE=2>
2
</option>
<OPTION VALUE=3>
3
</option>
</SELECT>
</td>
</tr>
</table>
</body>
</html>
The javascript function does not appear to be getting called correctly with the on change event.
Thanks and Regards,
Ryan Smith
Set the ids for the rows in a sequential order and then set display property of the every row to display:none, except the first one and in the showUser method called on the each row while performing the selection, set the display for the subsequent row to display:block. You will get it working.
For example:
<table>
<tr id="r1">
<td><select name="users" onchange="showUser(2, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?> </option>
</SELECT>
</td>
</tr>
<tr id="r2" style="display:none;">
<td><select name="users" onchange="showUser(3, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?> </option>
</SELECT>
</td>
</tr>
</table>
function showUser(index,val)
{
document.getElementById("r"+index).style.display="block"
//your code
}
Edit Part
Ok I am guessing what you want just change the size=1 to size=2 in the tag. You will get the values within the dropdown list box itself.
Edit on Jan17
Hey change your function as shown below
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+(userNumber+1)).style.display="block"
}
</script>
Hope this helps you.
Thought I would post the final solution here and full code. Big Thanks to #AmGates on this one.
index.php
<html>
<head>
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+(userNumber+1)).style.display="block";
if (str=="")
{
document.getElementById("txtHint" + userNumber).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?
$con = mysql_connect('localhost', DBUser', 'DBPass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("DBName", $con);
$skusql="SELECT packcode,concat(packcode, ' - ' , description) as description from skudata";
$resultsku=mysql_query($skusql);
$optionssku="";
while ($row=mysql_fetch_array($resultsku)) {
$sku=$row["packcode"];
$description=$row["description"];
$optionssku.="<OPTION VALUE=\"$sku\">".$description;
}
?>
<table border=1>
<tr>
<td width=393>Product</td>
<td width=200>Category</td>
<td width=150>Selling Unit</td>
<td width=150>Grouping</td>
<td width=150>Full Case QTY</td>
</tr>
</table>
<table>
<tr id="r1">
<td>
<select name="users" onchange="showUser(1, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint1"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r2" style="display:none;">
<td>
<select name="users" onchange="showUser(2, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint2"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r3" style="display:none;">
<td>
<select name="users" onchange="showUser(3, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint3"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r4" style="display:none;">
<td>
<select name="users" onchange="showUser(4, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint4"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r5" style="display:none;">
<td>
<select name="users" onchange="showUser(5, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint5"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r6" style="display:none;">
<td>
<select name="users" onchange="showUser(6, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint6"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r7" style="display:none;">
<td>
<select name="users" onchange="showUser(7, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint7"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r8" style="display:none;">
<td>
<select name="users" onchange="showUser(8, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint8"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r9" style="display:none;">
<td>
<select name="users" onchange="showUser(9, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint9"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r10" style="display:none;">
<td>
<select name="users" onchange="showUser(10, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint10"><b>SKU Details will be seen here</b></div>
</td>
</tr>
</table>
</body>
</html>
GetData1.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'DBUser', 'DBPass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("DBName", $con);
$sql="SELECT Category, SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<table border=1><tr>";
echo "<td width=200>".$row['Category']."</td>";
echo "<td width=150>".$row['SellingUnits']."</td>";
echo "<td width=150>".$row['Grouping']."</td><td width=150>";
if($row['SellingUnits']=="CS"){echo $row['CasesPerPallet'];} elseif($row['SellingUnits']=="SHR") {echo $row['ShrinksPerPallet'];}
echo "</td></tr></table>";
}
mysql_close($con);
?>
Thanks again to everyone on this site, really appreciated.