Fade-In & Out a <tbody> element on <select> change - javascript

I have a <select> drop-down menu which displays different input fields depending on what is selected using JavaScript.
<select name="country" onchange="SelectCheck(this);" id="country">
<option value="United States of America" id="USA">United States of America</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
...
</select>
The input tags are wrapped in <tbody> tags though. I had to do it this way because it's inside of a table and the <div> tag does not work.
<tbody id="USDLdiv" style="display:none;">
<tr>
<td><input type="text" placeholder="USA License No."></td>
</tr>
</tbody>
I would like to add a fade in & fade out effect when you switch between options.
All I got is:
$selectoption = $("#country");
$("select", $selectoption).change(function() {
$("tbody > tr", $selectoption).fadeOut();
});
But it's not working.

The code shown is looking for a <select> that is a descendant of #country but #country is a <select> and has no such descendent.
Similarly inside the event handler you are looking for a <tr> that is a descendant of the <select> and a has no such descendant
Try:
$("#country").change(function() {
$("tbody > tr").fadeOut();
});

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select name="country" id="country">
<option value="usa">United States of America</option>
<option value="afg">Afghanistan</option>
<option value="alb">Albania</option>
<option value="alg">Algeria</option>
</select>
<table>
<tbody>
<tr id="usa">
<td><input type="text" placeholder="USA License No."></td>
</tr>
<tr id="afg">
<td><input type="text" placeholder="Afghanistan License No."></td>
</tr>
<tr id="alb">
<td><input type="text" placeholder="Albania License No."></td>
</tr>
<tr id="alg">
<td><input type="text" placeholder="Algeria License No."></td>
</tr>
</tbody>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('tr').hide();
$(document).on('change','#country', function(){
var send = $(this).val();
$('tr').fadeOut();
$('#'+send).fadeIn();
});
});
</script>
</html>
Hope it can help you!

Related

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

Table with unique drop down combination for each row

I am having a table where there is two drop down drop-1 and drop-2. So I want to have drop-1 and drop-2 combination as unique.
I tried to create a new object and store that value in that but did not work.
<!DOCTYPE html>
<html>
<body>
<h2>Table</h2>
<table>
<tr>
<th>DD 1</th>
<th>DD 2</th>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Need some clarity of thoughts how to achieve that need some suggestion the best possible way to do it if possible with an example

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

Binding duplicate events by using clone()

i already duplicate my html elements by this javascript code but i cannot copy the events of the code.Will you gyups please prove me the possible solution.
<script type = "text/javascript" language = "javascript">
function func_addmore(){
$(document).ready(function() {
$("div").click(function () {
$(this).clone().insertAfter(this);
});
});
}
</script>
<body id="show" onload="func_load()">
<form method="POST" action="get_value.php" >
<table class="table table-condensed">
<tr>
<td width="1%"><span> Level of Education:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">Masters</option>
<option id="2">Bachelors</option>
<option id="3">HSC</option>
<option id="4">SSC</option>
</select>
</td>
</tr>
<tr>
<td ><span>Exam/Degee Title:</span></td>
<td ><input name="degreetitle" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<tr>
<td><span>Concentration/Major:</span></td>
<td><input name="major" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td><span>Institutions:</span></td>
<td>
<select id="institutions" name="institutions" onchange="func_ins()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">Others</option>
</select>
</td>
</tr>
<tr id ="trins">
<td><span>Others</span></td>
<td><input type="text" id="others_ins" /></td>
</tr>
<tr>
<td><span>Result:</span></td>
<td>
<select id="result" name="result" onchange="func_res()">
<option value="none" selected >----Select ----</option>
<option id="1">Grade</option>
<option id="2" >Division</option>
</select>
</td>
</tr>
<tr id ="trgrade">
<td><span>Grade</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id ="trscale">
<td><span>Scale:</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id="trdiv" onload="func_hid()" >
<td><span>Division:</span></td>
<td>
<select id="division" name="division">
<option value="none" selected >----Select ----</option>
<option id="1">1st Division</option>
<option id="2">2nd Division</option>
</select>
</td>
</tr>
<tr>
<td width="1%"><span> Year of Passing:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">2016</option>
<option id="2">2015</option>
<option id="3">2014</option>
<option id="4">2013</option>
<option id="5">2012</option>
<option id="6">2011</option>
<option id="7">2010</option>
<option id="1">2009</option>
<option id="2">2008</option>
<option id="3">2007</option>
<option id="4">2006</option>
<option id="5">2005</option>
<option id="6">2004</option>
<option id="7">2003</option>
<option id="1">2002</option>
<option id="2">2001</option>
<option id="3">2000</option>
<option id="4">1999</option>
<option id="5">1998</option>
<option id="6">1997</option>
<option id="7">1996</option>
<option id="1">1995</option>
<option id="2">1994</option>
<option id="3">1993</option>
<option id="4">1992</option>
<option id="5">1991</option>
<option id="6">1990</option>
<option id="7">1989</option>
<option id="2">1988</option>
<option id="3">1987</option>
<option id="4">1986</option>
<option id="5">1985</option>
<option id="6">1984</option>
<option id="7">1983</option>
<option id="5">1982</option>
<option id="6">1981</option>
<option id="7">1980</option>
</select>
</td>
</tr>
<tr>
<td ><span>Duration:</span></td>
<td ><input name="duration" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td ><span>Achievement:</span></td>
<td ><input name="achievement" type="text" id="name" size="19" class=""/></td>
</tr>
<tr><td> <input type="submit" name="submit" value="submit" />
</td></tr>
<tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
</td></tr>
</table>
</div>
</form>
</body>
Is there any way to do that? Thanks in advance.I hope i will find out my answer through you guys.Thank you.
The jQuery .clone() method offers the option to also clone events. Please note that by default this option is not used. In order to clone events you need to use:
$(this).clone(true).insertAfter(this);
More detail at jQuery.clone()
I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
More information can be found in the jQuery documentation.
I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.

Categories