Disable dropdownlist option with other dropdownlist option

Disable dropdownlist option with other dropdownlist option - javascript

Here's what I am trying to do: If I select something from the dropdown list "selectOption1", I want to set an option in the other dropdown list "selectOption2" to "invisible". Unfortunately, I cannot address the element correctly in the other list.
multiCapture.html
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
var ddl = document.getElementById("selectOption2");
var selectedValue2 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
selectedValue2.options[2].style.display = "none";
}
}
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable">
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required onchange="setAnrede()">
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>

You could attach the change event in your JS code instead, then use eq() to select the option you want based on the index, like:
jQuery solution :
$('#selectOption1').on('change', setAnrede);
function setAnrede() {
var ddl = $("#selectOption1");
var dd2 = $("#selectOption2");
if ($(this).val() === 'Männlich') {
dd2.find('option:eq(2)').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
Pure Js solution
document.getElementById("selectOption1").addEventListener("click", setAnrede);
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var dd2 = document.getElementById("selectOption2");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
dd2.options[2].style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<tr>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Titel</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
<tr>
<td>
<div class="input-field">
<select id="selectOption1" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
<label>Geschlecht angeben:</label>
</div>
</td>
<td>
<div class="input-field">
<select id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Lieber">Lieber</option>
<option value="Werter">Werter</option>
<option value="Hallo">Hallo</option>
</select>
<label>Anrede angeben:</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</form>

You need to change your javascript code
<script type="application/x-javascript">
function setAnrede() {
var ddl = document.getElementById("selectOption1");
var selectedValue1 = ddl.options[ddl.selectedIndex].value;
var ddl2 = document.getElementById("selectOption2");
var selectedValue2 = ddl.options[ddl.selectedIndex].value;
if (selectedValue1 == 'Männlich') {
ddl2.options[2].style.display = "none";
}
}
</script>

Related

How do I fill a cell in the table dynamically?

How do I fill a cell in the table dynamically after the user selects an option within the column?
Inside the select there is an update function and it is working, but I can't update column two of the line with the data given value of the select.
function update(line) {
// update in the col of mytable for next col.
// whats wrong with this code?
// Why not working?
var td = line.closest('td');
td.nextSibling.innerText = line.value;
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='emilio'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td>
2
</td>
</tr>
</tbody>
</table>

Since the onChange is working, you need to select the containing td then update then next one like:
function onChange(update) {
var td = update.closest('td');
td.nextElementSibling.innerText = update.value;
}

Your function name should be update, try this
function update(e) {
//update in the col of mytable for 0
if( e.id ==='item1'){
document.getElementById('selection1').innerHTML= e.value
}else{
document.getElementById('selection2').innerHTML= e.value
}
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='4'>option4</option>
</select>
</div>
</td>
<td id='selection1'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item2" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='selection2' ></td>
</tr>
</tbody>
</table>

Why does Jquery parent child selecter return undefined?

Why jquery parent child selector is not working here :
$(document).on('change', 'select[name="slct_sec"]', function() {
var cls_1 = $(this).closest('article').find('select[name="slct_cls"]').val();
console.log(cls_1);
var cls_1_bis = $(this).parent().siblings().find('select[name="slct_cls"]').val();
console.log(cls_1_bis);
});
$("#productTableServerSide").on('change', '.server-dropdown', function(event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//not working
var itemName = $(this).closest('tbody').find('.col-name').val();
console.log('itemName : ', itemName);
//not working
var itemName1 = $(this).parent().children('.col-name').val();
console.log('itemName1 : ', itemName1);
//not working
var itemName2 = $(this).parent().siblings().find('select[name="values"]').val();
console.log('itemName2 : ', itemName2);
//not working
var itemName3 = $(this).parent().children('.col-name').find('select[name="values"]').val();
console.log('itemName3 : ', itemName3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Example from Internet which is working</p>
<article>
<section>
<select name='slct_cls'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</section>
<br/>
<section>
<select name='slct_sec'>
<option value='1'>A</option>
<option value='2'>B</option>
</select>
</section>
</article>
<br/>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I've used an example from here : Jquery selecting a parents child which didn't work for me.
The console.log returns undefined => which means that either the variable is undefined or something else
Could you help me?

Thanks for your help. After searching an answer to my question here is the solution of my problem :
$("#productTableServerSide").on('change', '.server-dropdown', function (event) {
//ancienne valeur
var oldValue = $.data(this, 'itemValue');
//nouvelle valeur
var newValue = $(this).val();
console.log('break1');
//working
var itemName = $(this).closest('tr').find('.col-name').text();
console.log('itemName : ', itemName);
alert(itemName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>My Example</p>
<table id="productTableServerSide" class="table table-bordered" style="width:100%;">
<thead class="thead-dark text-white">
<tr>
<th>Check</th>
<th>#</th>
<th>The product name</th>
<th>The product value</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="col-checkbox sorting_1">
<input id="check0" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 0</td>
<td class=" col-value">3</td>
<td class=" col-dropdown">
<select id="drop3" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
<option value="2130554612">2130554612</option>
</select>
</td>
</tr>
<tr role="row" class="even">
<td class="col-checkbox sorting_1">
<input id="check1" type="checkbox" class="server-checkbox">
</td>
<td class=" col-action">
Action
</td>
<td class=" col-name">item 1</td>
<td class=" col-value">1436184776</td>
<td class=" col-dropdown">
<select id="drop1436184776" class="server-dropdown custom-select custom-select-sm form-control form-control-sm" name="values">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="1436184776" selected="">1436184776</option>
</select>
</td>
</tr>
</tbody>
</table>
I pulish it for the others, in case they have the same issue.
Have a nice day!

var itemName = $(this).closest('tbody').find('.col-name').text();
try this,
is not an input elelment so I dont think you'll get anything with val()
instead I've used text(), or you can try other functions jquery provides, like html()
And out of all selectors you've tried to target <td class="col-name"> , above seems to work fine, second one wont work, I didnt try every one of them.

Changing table rows depending on 3 selectors

Depending on the value selected with the 3 selectors I only have to display the rows that contain those values selected earlier at the same time.
I currently have this and it works for one selector. How can I extend it for all the 3 selectors to affect the rows displayed?
<select id="selA">
<option value="0">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="0">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="0">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C1</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C2</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B1</td>
<td class="choice one">C3</td>
</tr>
<tr>
<td class="choice one">A1</td>
<td class="choice one">B2</td>
<td class="choice one">C4</td>
</tr>
</tbody>
</table>
AND JS:
$(document).ready(function(){
$("#selA").change(function(){
var textselected = document.getElementById("selA").value ;
target = '.' + textselected;
$('.choice').hide();
$(target).show();
});
});
How can I make it so it doesn't depend on the class and hides the rows that don't have ALL the values in the selectors?

K, I think you want something like this:
https://jsfiddle.net/agkh7f3w/2/
HTML:
<div id="filtru">filtru:
<select id="selA">
<option value="">Toate</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
</select>
<select id="selB">
<option value="">Toate</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="b4">B4</option>
<option value="b5">B5</option>
<option value="b6">B6</option>
</select>
<select id="selC">
<option value="">Toate</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="c5">C5</option>
<option value="c6">C6</option>
<option value="c7">C7</option>
<option value="c8">C8</option>
<option value="c9">C9</option>
<option value="c10">C10</option>
</select>
</div>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C2</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C3</td>
</tr>
<tr>
<td>A1</td>
<td>B2</td>
<td>C4</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#filtru select').change(function() {
const filtru = [$('#selA').val(), $('#selB').val(), $('#selC').val()];
$('#table tr').each(function() {
$(this).show();
$('td', this).each(function(i) {
const text = $(this).text().toLowerCase();
if (text.indexOf(filtru[i]) === -1) {
$(this).closest('tr').hide();
}
})
})
});
});

Bring selected item values

I have this table in html and what I am trying to do is that when I give the button assign with jquery it brings me the values of the select and the model
<button type="button" class="assign" id="assign">assign</button>
<table id="example-table" class="table table-striped table-hover table-condensed">
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>SELECT</th>
</tr>
<tbody>
<tr>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Ranger</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Tacoma</td>
<td>Red</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Mercury</td>
<td>Sable</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
</tbody>
</table>
jquery
$(function() {
$('.assign').click(function(e) {
var select = Here the value of select
var model = Here is the model value
console.log(select );
console.log(model );
});
});
And additional put me the select disabled

Here an idea how you can do it. Iterating each one of rows and get the model of your row and get the selected item, something like this:
$('#assign').on('click', function(e){
$('tbody tr').each(function(){
console.log($(this).children().find("select").find(":selected").text());
console.log($(this).children()[1].textContent);
})
});
An advice ID's must be uniques, so you should change that in each one of your selects.

Hide input boxes based on drop down selection

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>

jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>

You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});

A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">

HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/

Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

Disable dropdownlist option with other dropdownlist option - javascript

Related

How do I fill a cell in the table dynamically?

Why does Jquery parent child selecter return undefined?

Changing table rows depending on 3 selectors

Bring selected item values

Hide input boxes based on drop down selection

Categories

Resources