I have html with 2
<select> ... </select>
elements inside a span with class spanClass. Now i am trying to select those selects with jQuery with this code:
jQuery(document).ready(function() {
spans = jQuery('.spanClass');
spans.each(function() {
var inputs = jQuery(this).find('select');
console.log(inputs);// This is working
inputs.each(function() {
alert('test'); //This not
});
});
});
HTML:
<table>
<tr>
<td>
<select name="een">
<option> test </option>
</select>
</td>
</tr>
<select name="twee">
<option> test </option>
</select>
</td>
</tr>
</table>
However, this is not working, can anybody tell me why?
First> Put Table inside Div instead of Span (it's the correct way to do this)
Second> Correct your table tags as the following image and codes (some of them are incorrect!)
Now> Use these codes
HTML:
<div class="divClass">
<table>
<tr>
<td>
<select name="een">
<option> test </option>
</select>
</td>
</tr>
<tr>
<td>
<select name="twee">
<option> test </option>
</select>
</td>
</tr>
</table>
</div>
jQuery:
jQuery(document).ready(function() {
spans = jQuery('.divClass');
spans.each(function() {
var inputs = jQuery(this).find('select');
console.log(inputs);
inputs.each(function() {
console.log(jQuery(this).prop("name"));
});
});
});
Result:
var inputs = jQuery(this).find('select'); // Isn't inputs empty jQueryObject? length 0?
if inputs is empty jQueryObject, the callback function passed by .each() is never called.
Related
I am trying to validate the DONM using jquery Please look into the fiddle.
My objective is not to select the same country to same room number .
I have two scenarions
scenario 1 (before saving into DB)
The example is working fine
scenario 2 (After saving the data into db )
saved data coming from DB
Available Country RooNumber SelectedPerson
droipdown1 1
dropdown2 2 chennai
WRONG SELECTION
Available Country RooNumber SelectedPerson
chennai 1 chennai
chennai 2 chennai
JSFiddle:
http://jsfiddle.net/bharatgillala/9o1gxa1h/10/
code:
<table id="gridviewInfo" runatr="server">
<TBODY><TR>
<TH scope=col>Available Country</TH>
<TH scope=col>RooNumber</TH>
<TH scope=col>Selected</TH>
</TR>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico
</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
<TD style="WIDTH: 100px">1</TD>
<td>
<label id='lbl2'> maxico </label>
</td>
</TR>
<TR>
<TD style="WHITE-SPACE: nowrap" align=left>
<SELECT class="judges" id='ddlAvailableJudges2' name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
2
<td>
<label id='lbl2'>chennai</label>
</td>
</tr>
</table>
First of all, you're creating n label tags with the id lbl2.
This is happening, because you're developing with ASP.NET and you didn't create your label with the runat=server attribute, so it won't generate different label IDs for each label created.
Second, your code was too ugly / verbose, so I decided to make a complete new code to achieve what you want, and the snippet is below, full commented:
(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('select'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// initially, we want to change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
// then, we must disable this option in all the other dropdownlists
updateDisabled(ddl);
// so, we add a change event handler
ddl.addEventListener('change', function(e) {
// when the ddl value is changed, we update the label text
lbl.textContent = ddl.value;
// and we disable the option selected in all the other dropdownlists
updateDisabled(ddl);
});
});
function updateDisabled(ddl) {
// to disable all the other dropdownlists
// we loop through all the HTMLOptionElements inside the table
[].forEach.call(table.querySelectorAll('option'), function (opt, j) {
// we look if the current option inside the loop is not the selected one
if (opt.parentNode !== ddl) {
// then, if the option has the same selected value, we disable it, else we enable
opt.disabled = opt.value && opt.value === ddl.value;
}
});
}
});
})(document);
#gridviewInfo td:nth-child(1) {
white-space: nowrap;
text-align: left;
}
<table id="gridviewInfo" runatr="server">
<thead>
<tr>
<th>Available Person</th>
<th>RooNumber</th>
<th>SelectedPerson</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges1" name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>1</td>
<td>
<label>maxico</label>
</td>
</tr>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges2" name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>2</td>
<td>
<label>hongkong</label>
</td>
</tr>
</tbody>
</table>
Update
Since the OP asked, I've created a fiddle for him: http://jsfiddle.net/h1b6e8zm/
I have made a way to present a droplist to end user and by default containing 4 items (value=a,value=b,value=c,value=d). When a user click on a checkbox the content of the droplist changes to only 2 items (value=a,value=b) IF unchecked returned to default state.
I achieve this way below using hiding div but wondering if a better different way using Jquery, I have searched and cant figure it out using let say if checked present these options else present default. Currently I have to work with 2 different dropdown which is awkward when passing values in a form.
THE CHECKBOX
<label for="optionChoice"><input class="optionChoice" type="checkbox" id="optionChoice" name="optionChoice" value="YES" onClick="if(this.c.........
IN MY PHP PAGE I HAVE 2 DIV WHERE ONE IS VISIBLE AND THE OTHER IS NOT ALL DEPENDS ON IF CHECKBOX CLICKED THEN MAKE ONE VISIBLE AND THE OTHER INVISIBLE VISVERSA.
<div id="test">
<table class="TableStyle">
<tr>
<td>
<label for="serviceType">Service Type<font color="red"><b> * </b></font></label>
</td>
</tr>
<tr>
<td>
<select name="serviceType" id="serviceType">
<option value="" label="-- Choose One --"> -- Choose One --</option>
<option value="A" label="A">A</option>
<option value="B" label="B">B</option>
<option value="C" label="C">C</option>
<option value="D" label="D">D</option>
</select>
</td>
</tr>
</table>
</div>
<div id="test2">
<table class="TableStyle">
<tr>
<td>
<label for="serviceType2">Service Type<font color="red"><b> * </b></font></label>
</td>
</tr>
<tr>
<td>
<select name="serviceType2" id="serviceType2">
<option value="" label="-- Choose One --"> -- Choose One --</option>
<option value="A" label="A">A</option>
<option value="B" label="B">B</option>
</select>
</td>
</tr>
</table>
</div>
script
$(function() {
enable_cbChoice();
$("#optionChoice").click(enable_cbChoice);
});
function enable_cbChoice() {
if (this.checked) {
$("#test").hide();
$("#test2").show();
}
else{
$("#test").show();
$("#test2").hide();
}
}
Try to just have one dropdown (id="serviceType") and then add or remove the options based on the state of the checkbox:
var detached;
$('#optionChoice').on('change', function() {
var $el = $(this);
if( $el.prop('checked') ) {
detached = $('option[value="C"], option[value="D"]').detach();
} else {
$('#serviceType').append(detached);
}
});
Working Fiddle: http://jsfiddle.net/jhummel/D43fh/
You can achieve this by detecting the state of the checkbox using javascript. I can show you the method using jquery. Then you can use the remove and append function of jquery to add and remove values from the dropdown. To achieve your problem, you can do something like this.
$('input[type="checkbox"]').click(function() {
if( $(this).is(':checked') ) {
$("#selectBox option[value='C']").remove();
$("#selectBox option[value='D']").remove();
} else {
$('#selectBox').append('<option value="C">C</option>');
$('#selectBox').append('<option value="D">D</option>');
}
});
I have a table and a form with a dropdown:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
and I want to add a disabled attribute to every option on the dropdown that is already on the table resulting in this:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple" disabled>Apple</option>
<option value="Banana">Banana</option>
<option value="Orange" disabled>Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
Is there any way to achieve using jQuery?
$("td.text").text(function(i, txt) {
$("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});
DEMO: http://jsfiddle.net/322PA/
Get each item value from the select option and compare it with the data inside table row. If both matches then disable the data/option in dropdownlist/select element.
$(document).ready(function(){
//loop through the select option
$("form > select").children().each(function(){
//store each option to check later
var item = $(this).val();
//loop through table row
$("table").children().each(function(){
//loop through table data
$("tr").children().each(function(){
//compare previously stored item with table data value
if(item == $(this).text()){
//disable option
$("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
}
});
});
});
});
jsFiddle Demo
I am guessing you will be dynamically changing the content of the table and want the select element to update when the table changes. You must therefore make sure it updates each time it's used.
$("#theSelector").bind("mouseenter", disableOptions);
function disableOptions() {
var tableData = [];
$("#theTable tr").each(function() {
tableData.push($(this).children(":first").text());
});
$("#theSelector option").each(
function() {
if(jQuery.inArray(this.text, tableData) > -1) {
$(this).prop('disabled', true);
}
}
);
}
I have created this form with several select menu and a couple of jQuery hide and show functions. The way the form is supposed to work is that, when you click on the options from the main select menu it sould autimatically show you the corresponding select submenu.
Here is my code:
jQuery:
$("#mankleding").bind("click",menclothes);
$("#manschoen").bind("click",menshoes);
$("#manaccessoires").bind("click",menaccessoires);
function menclothes(evt){
$("#subkledingheren").show("fast");
$("#subschoenenheren").hide("fast");
$("#subsaccessoiresheren").hide("fast");
}
function menshoes(evt){
$("#subkledingheren").hide("fast");
$("#subschoenenheren").show("fast");
$("#subsaccessoiresheren").hide("fast");
}
function menaccessoires(evt){
$("#subkledingheren").hide("fast");
$("#subschoenenheren").hide("fast");
$("#subsaccessoiresheren").show("fast");
}
HTML:
<tr>
<td> Artikel hoofd-categorie: </td> <td> <select id="manhoofd">
<option>HEREN</option>
<option id="mankleding">KLEDING</option>
<option id="manschoen">SCHOENEN</option>
<option id="manaccessoires">ACCESSOIRES</option>
</select>
</td>
</tr>
<tr>
<td> Artikel sub-categorie: </td> <td id="subcategorie"> <select id="subkledingheren">
<option>HEREN-KLEDING</option>
<option>Broeken & Jeans</option>
<option>Jassen</option>
<option>Sweaters & Hoodies</option>
<option>Zwemkleding</option>
</select>
<select id="subschoenenheren">
<option>HEREN-SCHOENEN</option>
<option>Sneakers / Casual</option>
<option>Slippers & Sandalen</option>
<option>Instappers</option>
</select>
<select id="subsaccessoiresheren">
<option>HEREN-ACCESSOIRES</option>
<option>Horloges</option>
<option>Brillen & Zonnebrillen</option>
<option>Stropdassen</option>
</select>
</td>
</tr>
Try using change event:
$('#manhoofd').change(function(){
var i = $('option:selected', this).text();
$('select(:not(:first))').hide();
$('select:contains('+i+')').show()
})
DEMO
I am using dropdownlist and one label in my html page. I want to change name of label
on selection of my dropdownlist box. How is it possible?
pls povide any help for me .
Check this example.
It will change the attribute 'name' of your label, and its text content (reading its new name attribute value) to see the change in effect.
<script type="text/javascript">
function changeValue(select) {
var value = select.options[select.selectedIndex].value;
var label = document.getElementById('mylabel');
label.setAttribute('name', value);
label.innerHTML = label.getAttribute('name');
}
</script>
<select name="selectcity" onchange="changeValue(this);" >
<option>Mumbai</option>
<option>Delhi</option>
</select>
You selected: <label id="mylabel" name="citylabel"></label>
<select id='derp' onchange="changeVal(this,'changeme');"> <!-- declare select, set onchange to point to changeVal JS -->
<option value='test'>test</option>
</select>
<input id='changeme' />
<script type='text/javascript'>
function changeVal(el,changeElID){
var changeEl = document.getElementById(changeElID); // Get input to change
changeEl.value = el.options[el.selectedIndex].value; // Change input value to value of selected index
}
</script>
[EDIT]
re-reading the question it sounds like you are trying to change the name of the input box...if that is the case, change changeEl.value to changeEl.name
HTML:
<table cellspacing="0" cellpadding="1" rules="all" border="0" id="gvLanguage">
<tr>
<td align="left">
<select id="ddlLanguage" style="width: 230px;">
<option value="0">[Select]</option>
<option value="1">Afrikaans</option>
<option value="2">Akan</option>
<option value="3">Albanian</option>
<option value="4">American</option>
</select>
</td>
</tr>
<tr>
<td>
Selected Value: <label id="lblChange" ></label>
</td>
</tr>
</table>
JQUERY:
$(document).ready(function(){
$("#ddlLanguage").change(function(){
var vSelectedValue = $("option:selected",$(this)).text();
$("#lblChange").text(vSelectedValue);
});
});
CLICK HERE TO SEE THE DEMO