Can anyone tell me why this works in older versions of jQuery (e.g. 1.4.2) but if you switch to a later version, e.g. (1.6 +) it stops working?
http://jsfiddle.net/nmvf6/1194/
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit').find('option[text="'+unitName+'"]').remove();
});
});
I have checked the error output in the console for the later versions, and an error seems to occur on the page load, before i've even got as far as it loading up my script and being able to click the button..
When I change the version to 1.8.0 for example and Run the page, this error comes up in my Opera scripts console:
Which seems to be in a "mootools" file..but I didn't select mootools, i selected jQuery 1.8.0
:/
Thanks.
You are using Attribute Equals selector which selects elements that have the specified attribute with a value exactly equal to a certain value, option elements don't have text attributes, you can use :contains selector instead, try this:
Select all elements that contain the specified text.
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit').find('option:contains('+unitName+')').remove();
});
});
FIDDLE
If you want to select the element that has only certain value you can use the filter method:
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$('.assUnit option').filter(function() {
return $(this).text() === unitName
}).remove();
});
});
FIDDLE
You will probably have more luck with this:
$('.assUnit').find('option:contains('+unitName+')').remove();
See also: :contains() selector
try this
$(function(){
$('#my_button').click(function(){
var unitName = "Unit2";
$(".assUnit option:contains('"+unitName+"')").remove();
});
});
Related
I'm new in Jquery, and I have this code:
jQuery(document).ready(function(){
var title = jQuery(".fullVisaImg").attr("inselect");
var links = jQuery(".ff_elem>option");
for(var i=0; i<links.length; i++) {
if (title == links[i].value) {
links[i].attr("selected", "selected"); // here is my problem
alert(links[i].value);
return;
}
}
});
i have a select element on my pages, and want to make one of elements selected. if I comment line with // here... all works good, and i see all my option values.
Thanks for help!
When you use [] to access an element in a jquery set, you get back the raw DOM element. So you can not use jquery methods on it directly..
You should also use .prop instead of .attr() when interacting with properties of the element
So use
links.eq(i).prop("selected", true);
replace you for loop with:
jQuery(".ff_elem").val(title);
I have created this DEMO for you. Check it out.
Although You can iterate through all your option elements and find your option element, and then do this:
links[i].prop("selected", true);
but there is no need to iterate when you can simply let your select element do this for you as I have mentioned above.
This is actually how you can select an option based on the value your options have.
$('select').val('value of the option you want to select');
so use
$(".ff_elem").val(title);
Following your code, you could use:
links.eq(i).prop("selected", true);
if your jquery version is above 1.6+ then use this
links.eq(i).prop("selected", true);
else
links.eq(i).attr("selected", "selected");
It can be much simpler. Try something like this:
jQuery(document).ready(function(){
var title = jQuery(".fullVisaImg").attr("inselect");
jQuery(".ff_elem>option[value=" + title + "]").attr("selected", "selected");
});
links is a jQuery collection. When you loop through it, you're just getting the raw element, not a jQuery wrapped version, so you can't use .attr().
Use this instead at your problem line.
$(links[i]).attr("selected", "selected");
I'm trying to get my head around jQuery, but I have trouble figuring out plain arrays vs jQuery arrays, and DOM elements vs jQuery elements.
So here's an example I try to do. The example is simple really, but I need some hand-holding :-p so I'll be verbose in my requirements hoping that the answers will be, in turn, descriptive.
I have two <select> drop-downs, with IDs #version and #target.
When I click a button, I want to select in #target the option following with the same name as the last-but-one value in #version. (the item WILL exist)
Example: #version has options: a,b,c,x. #target has options a,b,c,d,h,m.
I click the button. What should happen is:
read the last-but-one option in #version: "c"
find the option with the same name in #target: the 3rd (i.e. index is 2)
set the selected value in #target to the one after "c", i.e. "d" (the 4th, index 3)
Here's a fiddle with the example.
For the 1st step, I think I figured it out:
var latestVersion = $("#version option").get(-2).text;
//side-note: why does .text work but not .val() ? oh, .get() returns a DOM element
// so How do I get back to a jQuery element?
// $($("#version option").get(-2)).val() works but looks ugly
For step 2, I tried this:
var target = $("#target option:contains(latestVersion)");
but it doesn't work. And there's GOT to be a better way than manually iterating all the values searching for the right one.
Step 3: ??.
Using 1st step as you figured try the following:
$('#button').click(function(){
var latestVersion = $("#version option").get(-2).text;
//index of LAST-BUT-ONE
var target=$("#target option[value="+latestVersion+"]").index();
//Setting next index value
$("#target").prop("selectedIndex",target + 1);
});
http://jsfiddle.net/GpBDY/16/
.val() does not work on an option element, but it does work on a select element:
var v = $( "#version" ).val();
gives you the element selected in the dropdown #version.
The following line will not do what you want:
var target = $("#target option:contains(latestVersion)");
That is because latestVersion is treated as the value "latestValue" and not as the name of a variable. To use the value of the variable latestValue, put latestValue outside the string like:
... contains(" + latestVersion + ")...
You might be interested in the jQuery method .next() in combination with your code in step 2 to get the value of the next option element. Be aware that if there is no next element, the value will be "undefined".
You can do this using nth-child to select value of version and using that set the value of target this way:
$('#button').click(function(){
var latestVersion = $("#version option:nth-child(3)").text();
$("#target").val($('#target option[value="'+latestVersion+'"]').next().text());
});
Demo Fiddle
i am not sure i understand you are looking for, but i think that you want something like this:
$('#button').click(function(){
var arrVersion = $("#version option");
var latestVersion = $(arrVersion[arrVersion.length - 2]).val();
$("#target").val(latestVersion);
var actualSelected = parseInt($("#target").prop("selectedIndex"));
$("#target").prop("selectedIndex", actualSelected + 1);
});
http://jsfiddle.net/GpBDY/9/
The following code should enable the second select element (id=ANSWER.TTQ.MENSYS.8.) when the value in the first select element (id=ANSWER.TTQ.MENSYS.9.) changes, but it doesn't work and I've exhausted all the options I can think of, including those suggested already on this site. (NOTE: the element ids must be these values, hence I'm not using # to select them, as that doesn't work).
$(document).ready(function() {
$("input[id='ANSWER.TTQ.MENSYS.9.']").bind('change',function() {
alert ('this script runs');
$("input[id='ANSWER.TTQ.MENSYS.8.']").removeAttr('disabled');
});
});
If I substitute the enabled select (id=ANSWER.TTQ.MENSYS.9.) with a button and the change event with a click event; it works. So why not with change event on the select element?
Thank you for your help.
Firstly, you can select by id using the # character. Secondly you need to escape the . in the id attribute otherwise the selector engine will look for an element with the id ANSWER which also has TTQ, MENSYS and 9 as classes. Try this:
$("#ANSWER\\.TTQ\\.MENSYS\\.9\\.").bind('change', function () {
alert('this script runs');
$("#ANSWER\\.TTQ\\.MENSYS\\.8\\.").removeAttr('disabled');
});
Example fiddle
$(document).ready(function() {
$("#ANSWER.TTQ.MENSYS.9.").bind('change',function() {
alert ('this script runs');
$("#ANSWER.TTQ.MENSYS.8.").removeAttr('disabled');
});
});
select is not input( i.e. text input)
I'm generating a options elements for select el. And after document ready, I need do each() for all this elements. How can I do this?
ps I know how select this elements after some events, live(). But now, it's impossible.
you mean something like this ?
$(document).ready(function()
{
$('#id-select').find('option').each(function()
{
// do something with option - saved as $(this)
});
});
You can try this script
$('#myselect option').each(function(){
alert($(this).val());// option element
});
http://jsfiddle.net/gJeGK/
I have a situation like this,
Iam trying to select a label using Id selector and sets its value..Due to some reason it doesnt seem to be working
$(document).ready(function () {
$("#Label3").val("hii");
});
How do I verify that $("#Label3") has indeed selected the label.
The label is rendered like this:
<span id="Label3"></span>
Only fields have a value and are therefore accessible with val(). To set the text of a Span you should use html() or text().
$(document).ready(function () {
$("#Label3").html("hii");
});
or
$(document).ready(function () {
$("#Label3").text("hii");
});
You can check the number of elements in the result returned by $("#Label3") by looking at the length:
var label3 = $("#Label3");
if (label3.length == 0) {
// not found
}
The reason why your code doesn't work is that you need to set text not val:
$("#Label3").text("hii");
<span>s don't have values - you probably want $("#Label3").text("hii");.
To answer the question, however, you can check .length - it will return 0 when no elements were found (which is a false value in JavaScript):
var label3 = $("#Label3");
if(label3.length){
label3.text("hii");
}
else{
alert("label wasn't found.");
}
See also:
http://api.jquery.com/text
http://api.jquery.com/length
To verify if a selector has worked I'd normally do -
$("#Label3").length
I'd only use that during debugging though.
Using the console in Safari, Chrome, or Firefox/Firebug:
console.log( $( '#Label3' ) );
Or
console.log( $( '#Label3' ).length );
Also, your element is a span, which does not have a value. Use .text() or .html() instead of .val()
To clarify what others have said, val() in jQuery is for getting the value of input fields.