jQuery select list removes all options - javascript

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");

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.

Jquery - set style for many select - Can I use ID instead of NAME?

I'm really new at jQuery and bootstrap, if anyone can help I would be very happy. What I want to do is to set the same style to many drop down-menus.
The code I have now is:
$("select[name='NameOfSelect']").selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});
Can I do like this instead and hit all drop downs?
$("select").selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});
If that's not possible can I target the select with ID instead of NAME, how would that look?
the code you wrote in the question works!
$("select").selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});
here is a demo:
http://jsfiddle.net/nn007/6EncE/
yes you can when you use $("select") it will used for all select tags
if you use
$("select.hello") it will be used only for all select tags with the hello class
$("select#hello") for all select with id hello
Try this way:
$('#select_id').selectpicker({style:'btn-primary', menuStyle:'dropdown-inverse'});

list changing with javascript

I'm using MooTools.
I have a ul element:
<ul id="alerts"></ul>
And I can access it with $("alerts"), but when I try to change it by doing:
$("alerts").innerHTML += "<li>word</li>";
In a for loop, it only does the first... It doesn't add any more li tags. Full code here: rightandrong.info/Upload.html. I've modified it so it doesn't actually upload.
Drag and drop multiple files, and it should tell you when each one is done in the ul. What's wrong?
EDIT: Checking the full code is recommended.
That's why you can't do it
Regarding your problem: on the js fiddle I did it's working, are you sure the loop contains something more than one element? (on your example it's working too)

Create drop-down list using JavaScript instead of HTML

I have the following code that creates and deletes text boxes using javascript:
http://jsfiddle.net/JpYGg/8/
What I am aiming to do is infact create a set of three drop-down lists using this functionality instead of creating a textbox.
The code for the three drop-downs is shown here:
http://jsfiddle.net/MWH99/
I am a bit stuck as to how to achieve this. I added in the "dropdown" div and what I was thinking is to get the innerHTML of this div in order to use that to create the three lists every time?
The other question I have is how to have it so that these are generated by the javascript instead of an HTML one AND a JavaScript version.
Thank you for any help.
Martin
EDIT
I have the buttons working to create the next row of 3 drop-downs but they do not function the way that the original does, the parent drop-downs use javascript to identify the selection in the first drop-down in order to update the other two whereas the cloned ones lose this functionality.
Code cna be found here:
http://pastebin.com/pt1wef76
Original drop downs use dropdown.js which is http://pastebin.com/bDLpFWJY
Why not use a javascript library like jQuery for example. Would make this and many other things much easier. Could achieve what you want like this:
$('body').append('<!-- ANY HTML GOES HERE -->')
There's two basic approaches; create all of the elements in JavaScript, or copy a part of the DOM (some HTML) over and over.
People often put HTML in script tags (see jQuery Templating, for example), and then get the innerHTML of the tag and use that. For example,
<script type="text/plain" id="template">
<!-- HTML that you want to duplicate in here -->
</script>
<div id="contentcontainer">
</div>
...
<script type="text/javascript">
var addAnother = function( ) {
$("#contentcontainer").append(
$("#template").html()
);
};
</script>
This example makes use of jQuery primarily because jQuery is a lot less verbose and easier to read, but you certainly don't have to use jQuery. Here, the addAnother function will copy the HTML from #template and append it into #contentcontainer.
In your attempt above, you probably meant $('body').append($('#dropdown')); '#dropdown' is just a string, $('#dropdown') returns the element (or elements) with id="dropdown".

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()

Categories