Reset SELECT list not working in Firefox - javascript

I use the following code to reset the selected index of a select list in IE:
$("#list")[0].selectedIndex = -1
However, that doesnt appear to work in FF and Chrome. Can anyone tell me what the correct way to achieve this would be?

Use the .prop method of jQuery. Documentation can be found here.
Get:
$("#list").prop("selectedIndex");
Set:
$("#list").prop("selectedIndex",-1);

Why not this?
$("#list option").attr("selected", false);

Related

jQuery Show Hide is not working on Internet Explorer

Below code is working fine in Firefox & Chrome, but it is not working in IE.
Can someone please let me know the alternate to hiding select Dropdown options?
I tried with CSS style display: none as well but not no luck.
$j("#id option[value='test']").hide();
I spent lot of time to search on google related to same issue but changed my approach i tried the below scenario its worked like a charm for me
$j("#shipping_method optgroup[label='Free Shipping']").clone("optgroup[label='Free Shipping']").insertAfter("#shipping_method_form");
$j("#shipping_method optgroup[label='Free Shipping']").remove();
$j(".box-content .fedex").appendTo("#shipping_method");
#shipping_method_form is my select box id
above is an example from my scenario please take a look
hope this will be better solution for all browsers
$j("#id option[value='test']").hide();
// use proper Id correct.
Replace #id with proper id of the element.
$("option[value='test']").hide(); // here I assuming that you are not using ID
$("#idName option[value='test']").hide(); // here I assuming that you are using ID and replace `idName` with your IDs.

Using background image in an IF statement

I'm using this (javascript) code statement to see if an item has already been selected:
if (document.getElementById("someID").style.backgroundImage != 'url("images/bg_selected.png")' {
dothis
}
It works in firefox and IE but not chrome.
How can i get worked with chrome also?
You should use a data attribute instead of making logic on the background image. For instance when you select an element you can set data-selected='true' and then do
if (document.getElementById("someID").getAttribute("data-selected") === "true"){do something}
getComputedStyle get used in the condition
using javascript
window.getComputedStyle(document.getElementById("someId"), false).backgroundImage
using jquery we can solve
$("#activeObject").css("background-image")

How to use localstorage in chrome extensions

I have an extension. On the options page i am setting options, that obvious.
But i cant get localstorage to work. The options are binded to onclick event with jquery.
Example code how i am setting the values is like this:
localStorage["new_tab"]=$("#n_tab").attr('checked');
localStorage["anim"]=$("#anime").attr('checked');
localStorage["bov_e"]=$("#bov_e").attr('checked');
Where is the problem? Could you point me out in the right way?
Use localStorage.setItem("itemName", valueHere) to save the value, and localStorage.getItem("itemName") to retrieve it.
localStorage.setItem("new_tab", $("#n_tab").attr('checked'));
localStorage.setItem("anim", $("#anime").attr('checked'));
localStorage.setItem("bov_e", $("#bov_e").attr('checked'));
console.log(localStorage.getItem("new_tab"));
console.log(localStorage.getItem("anim"));
console.log(localStorage.getItem("bov_e"));
also you need to use
.prop('checked')

Does anyone know of issues with jQuery selector in IE with html select boxes?

I've got the following jQuery code for getting the first character of the string value of the selected option of an html select box.
var mode = $("#mode :selected").text()[0];
"mode" is the id of the html select element I want. This is not working in IE at the moment - does anyone know why that might be?
EDIT: Sorry everyone, it was nothing to do with jQuery. IE just wanted
var mode = $("#mode :selected").text().charAt(0);
I'm not sure why I thought the [0] would work in the first place. Thanks anyway.
maybe the problem is with not specifying the 'option'
we use this code in several of our projects and this does work in IE
$("#ComboBox option:selected").text()

jQuery select list removes all options

I have a <select> list, which has been populated with several options, but want to remove those options to start again.
I am using jQuery and have tried the following:
$("#selectId").length = 0;
But this seems to have no effect.
Part of my problem is that I am using Firebug to debug the JavaScript, but the debugger does not break at the breakpoint, so I cannot see what is going on. Should it break when the JavaScript is within the <head> of my HTML file?
this would do:
$('#selectId').html('');
This works too.
$("#selectId option").remove();
$("#selectId").empty(); works for me.
The $("#selectId option").remove(); removed the select from the DOM.
Currently using jQuery JavaScript Library v1.7.1
The fastest way to accomplish this:
$("#selectId").empty();
Here are some tests:
http://jsperf.com/find-remove-vs-empty
I take no credit for these tests.
See this stack overflow question: How do you remove all the options of a select box and then add one option and select it with jQuery?
$("#selectId").options.length = 0;
That won't actually work as written because it's using a jQuery selector. It'd work if you used a straight DOM getElementById on the select list, though. Either AKX's or d.'s responses will set you right.
If without jquery:
javascript SELECT remove()
Try This for Multiple Select Drop Down.
$('#FeatureId').multiselect("deselectAll", false).multiselect("refresh");

Categories