Option not removing in jquery - javascript

Hey I have an issue with my code on IE. Basically it won't remove the option on IE. It works fine on chrome.
function removeYrEndAndPettyCashCat() {
for (var i = 0; i < catsToRemove.length; i++) {
$('option[value = "' + String(catsToRemove[i].ID) + '"]').remove();
}
}
I have checked a few posts on this site and they say that .remove should work and it does in the console. However when I am trying to remove upon clicking on the dropdown the first time the dropdown appears it has the option still there. If I close the dropdown and open it again the option is now gone. This is only happening in IE. Has anyone come across this and if so could you suggest a fix?

Which IE browser are you using
Are you sure you execute your code on document ready or when the select is filled/created.
I just worked on a sample and it seems to work in IE11.
$(document).ready(function(){
$('select[name="test"] option').each(function(){
if($(this).val() === "remove"){
$(this).remove();
}
});
});
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<select id='test' name="test">
<option value="remove">Remove1</option>
<option value="remove">Remove2</option>
<option value="keep">Remove3</option>
<option value="remove">Remove4</option>
<option value="keep">Remove5</option>
<option value="keep">Remove6</option>
<option value="remove">Remove7</option>
<option value="remove">Remove8</option>
<option value="remove">Remove9</option>
</select>
</body>
</html>

I found a fix by adding a timeout. Basically IE is executing the javascript before the dropdown is being loaded dynamically. This is really annoying as Chrome doesn't have this issue.

Related

casperjs: can't get jquery to use global variables

I'm hoping this is a stupid question with an easy answer.
(I've googled for a day and a half without joy)
I am writing a casperjs script which changes a pulldown menu
I've dumbed down the test code to get to the crux of the problem
My test HTML is as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body style="background-color:powderblue;">
<form>
<select id="down">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
A working Casperjs script using jquery:
casper.start("http://192.168.0.14/test.html", function(){
//change the pulldown selection
casper.then(function () {
this.evaluate(function(){
$('#down').val('vw').change();
});
});
casper.then(function(){
this.capture("screen.png");
});
});
casper.run();
Now I want to parameterise the code, and use variables instead of strings for the selector and the value. But this code does not work:
var x1='#down';
var y1='vw';
casper.start("http://192.168.0.14/test.html", function(){
//change the pulldown selection
casper.then(function () {
this.evaluate(function(){
$(x1).val(y1).change();
});
});
casper.then(function(){
this.capture("screen.png");
});
});
casper.run();
This shouldn't be difficult (and probably isn't) but all combinations of "window." or square bracket notations have failed me.
jquery is refusing to play nice.
Please help, I didn't think this would put me out of my depth, but it clearly has
Try this:-
this.evaluate(function(x1, y1){
$(x1).val(y1).change();
}, x1, y1);
Anything inside evaluate is sandboxed and you will need to pass in any params you want to use inside

jquery .val() strange behavior on dropdowns

I have a html <select> tag with some <option>s. Something like this:
<select id="season">
<option value="">Select an option</option>
<option value="1">Spring</option>
<option value="2">Summer</option>
<option value="3">Autumn</option>
<option value="4">Winter</option>
</select>
And I have this javascript code:
<script>
$(document).ready(function(){
$("#season").val("1");
});
</script>
This does not select "Spring" option and remain in "Select an option" option! But when I use
$(document).ready(function(){
setTimeout(function(){
$("#season").val("1");
}, 100)
});
This works correct! What is the problem? Any help would be greatly appreciate.
Try This
<script>
$(document).ready(function(){
$("option[value='1']").attr('selected','selected');
});
</script>
Above mention code will work.
even below mention your code will work, but script section should below all the HTML code and before the body close tag. Because once jQuery or javaScript start executing at that time HTML DOM will available and script can able to select that DOM.
<script>
$("#season").val("1");
</script>
In your code once you add setTimeout and your script is able to select the option because you are delaying by 100 micro second, it means before executing your script HTML DOM are available that is why you are able to select the DOM
<script>
setTimeout(function(){
$("#season").val("1");
}, 100)
</script>
on page load is called after all resources is loaded whereas jquery ready is called when dom is loaded so basically ready gets called before on-load. Hence it does not work

Setting select box using jQuery on document ready

Can anyone suggest how I get to change the selected item in a select menu with jQuery - I've tried the following but without success. Using this snippet how would I use jQuery to set to value '5' for example (eg Cambridgeshire) as the 'selected' value.
<script type="text/javascript">
$(document).ready(function() {
$('#county_id option[value=3]').attr('selected', 'selected');
});
<html>
<select name="county_id" id="county_id">
<option value="1">Bedfordshire</option>
<option value="2">Berkshire</option>
<option value="4">Buckinghamshire</option>
<option value="5">Cambridgeshire</option>
</select>
</html>
You just need to use the val method.
$('#county_id').val(5);
This should work in most cases and will automatically select the correct option.
<script type="text/javascript">
$(document).ready(function() {
$('#county_id').val(3);
});
</script>
Should be able to use a jquery selector than edit the attributes.
$('input:radio[name=county_id]')[3].checked = true;
or
$('input:radio[name=county_id]:nth(3)').attr('checked',true);
In this case, 3 is the counter associated with Cambridgeshire (remember, counting starts at zero).
via

IE: Javascript onchange function getting empty value

Why this Simple Javascript function not working in Internet Explorer Version 8.
Why myvalue is empty in Internet Explorer.
javascript debug myvalue==
This is working fine in Chrome/Firefox and shows the selected value correctly.
javascript debug myvalue=Item2=
Code
<html>
<script type="text/javascript">
function showValue(myvalue)
{
document.write("javascript debug myvalue=" + myvalue + "=\n");
}
</script>
<body>
<select id="items" onchange="showValue(this.value);">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
</body>
</html>
That's because you don't have VALUES in your options. Something like this will work:
<option value="VALUE1">TEXT1</option>
But, if you actually need option's TEXT and not VALUE, you should use this:
var e = document.getElementById("items");
var txt = e.options[e.selectedIndex].text;
Refer to HTMLOptionElement DOM spec for more info on options.
If you were to use instead of this.value, this.options[this.selectedIndex], it might work in IE8 (which I don't have).

Why is'nt this JavaScript function not redirecting to selected option value?

I have a JavaScript function:
function redirect(location) {
window.location.href=location;
}
Which I'm using like so:
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
I'm expecting for it to redirect to the selected option value, but does'nt seem to do anything? - bare in mind im new to JavaScript.
Hope someone can help! :)
Try this:
<select onChange="redirect(this.value)">
try this
<script>
function redirect() {
var location=document.getElementById("i").value;
window.location.href=location;
}
</script>
<select onChange="redirect()" id="i">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
Your code itself is functional (i tried).
Where have you placed the function definition?
Is there any other javascript code on the page?
In which browser are you testing this?
If you're running it in Firefox check the error console (Tools->error console).
I also noticed that Internet Explorer 8 blocks this javascript, I haD to check allow blocked content for this to work.
can be because location is a short way to call window.location, so just rename your input parameter - _location, newLocation, loc, whatever else.
UPDATE
Nope, this should work. Having only
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
<script type="text/javascript">
function redirect(location) {
window.location.href=location;
}
</script>
on the page gave me the desired result, so the error may be somewhere around - just give us more code!

Categories