Develop Reference

Deselect top option in <select> - bootstrap multiselect

I have a bootstrap multiselect html element that i fill with data from a web service call that gets a list of regions in New Zealand. I need to load those options into the <select> and not select the top option by default.
I have tried everything that is done via the bootstrap multiselect built in functions and options. Nothing will work. So i am resorting to vanilla javascript or vanilla jquery to go straight into the plain html and deselect the first option.
All work on this can be done in this jsfiddle
I had to copy paste a minified external resource (xml2json.min.js) into the top of the javascript editor because it wasn't playing nicely when I tried to add it as an external resource.
I have tried this:
$("ul.multiselect-container").find("li").removeClass("active");
And it doesn't work. It removes the active class but doesn't deselect the option. How do I deselect the option?
I have tried this:
$("ul.multiselect-container").find('input[type="radio":checked]').prop('checked', false);
It doesn't deselect the option.
Please see if you can deselect the top option of the select.
So the jsfiddle at url same as above but ending in 182 is my refactoring to try and make it easier for people to understand but it didn't end up working correctly on my friends laptop.
When using the plugin as a <select multiple=true> it doesn't select the top option by default. However I need that same behaviour with a normal <select>

I just had a look in the plugin, And here is what I understood, To remove default selection you must have your selection set as multiple='multiple', This is when you can see a Checkbox in the drop down rather than radio buttons.
If you do not put this multiple option set then you will end up in having a radio button and this will set the first value by default. Here is the Fiddle which doesnt not select any default value. I just added the option multiple='multiple' to your dynamic select tag.
To have the option multi select set and also be able to select only one at a time use the below code. You need to replace your code block with this one
$("body").prepend("<select id=\"a-select\" multiple='multiple' >"
+ optionsText +
"</select>");
$('#a-select').multiselect({
on: {
change: function(option, checked) {
alert('sdd');
var values = [];
$('#a-select').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#a-select').multiselect('deselect', values);
}
}
});
Logic taken from http://davidstutz.github.io/bootstrap-multiselect/#further-examples, see the 5th example from here which says Simulate single selections using checkboxes.

I have redefined the method "deselect" as follows.
this.deselect = function() {
$('input[type="radio"]:checked').attr('checked', false);
$(".multiselect-selected-text").text("None selected");
}
JsFiddle Demo

Add an empty option to the top of the select element.

Add chosen after adding id by dynamically

I am showing option with chosen plugin and latter add option to it.
I am trying below
<select id='one'>
<option>a</option>
<option>b</option>
</select>
and calling chosen plugin
$('#one').chosen();
it working fine now i am remove chosen part and adding new option to select box
$('#one').append(' <option>g</option>');
$('#one').addClass('abc').attr('id', '');
$('#one_chosen').remove();
$('.abc').attr('id', 'myid');
$('#myid').chosen();
as you can see that i have added id by class and calling chosen() on it but this time its not working. And i can not keep id one in select box if there is no chosen
jsfiddle

You must clone the element in order to make it work:
$('#one').chosen();
$('#one').find('option:first').remove();
$myid = $('#one').clone().attr('id', 'myid').insertBefore('#one');
$("#one, #one_chosen").remove();
$myid.show().chosen();
Updated demo

i am not sure i understand your question. But you can refresh chosen with .trigger("chosen:updated"); i.e you can do something like
$('.select-chosen').chosen();
$('#one').addClass('abc').attr('id', '');
$('.abc').attr('id', 'myid');
$('.select-chosen').trigger("chosen:updated");
Update:
Ideally, if you want to fully change the select chosen, it is better to just hide and show new select chosen. In case, if you want to add or remove option from select and want to gain fully functionality of chosen you can do it easily with
// add custom option
$(".select-chosen").append('<option>Custom Option</option>');
// remove existing option
$(".select-chosen option[value='a']").remove();
Refer : http://jsfiddle.net/qubkhtsc/5/

After angular filter on options if only one option is left, select it

I have two select boxes. One of the boxes takes what the other one has selected and uses it as a filter for itself. Sometimes that filter only leaves one option. I am looking for a way to auto select that option only if it is the only one in the list.
If this is too vague I can put in an example.
Thank you in advance.

This is not an Angular related question. But here is the answer using jQuery:
var numitems=$('#myselect').children('option').length;
if(numitems == 1) {
$("#myselect option:first").attr('selected','selected'); // just select the first
}
You can also select by value if you know the value
$('[name=myselect]').val( 3 ); // Select by a value== 3
You can also select by text.

Jquery Chosen is updating cascading selects on step behind native select boxes

I am using jquery chosen on 4 select boxes that are being populated via database.
The select box ids are: #Year_395, #Make_395, #Model_395, #Trim_395.
I am using the following script to "cascade" them so that the second select box's options depend on what option has been selected in the first, the options for the third are dependent on the second selection etc.
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
var parentValue = (this.value).replace(" ", "_");
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + parentValue))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
The native select boxes are cascading correctly. The problem is that when I implement jQuery Chosen, the new select boxes update, but do so one step behind the native boxes. For now I am using the below code to update the options for jQuery Chosen's replacement select box display. This should cause jQuery Chosen to update #Trim_395 as soon as an option for #Model_395 has been selected.
$("#Model_395").chosen().change(function(){
$("#Trim_395").trigger('chosen:updated');
});
Here is the link to the build site:
You will see that if you select your year, make, and model, no trim options will be available, as if you have yet to select the model. If you then select another model, the options for the first model you selected will be displayed. Selecting a third model will display the trim options for the second, etc.

I figured it out on my own. jQuery Chosen was updating before the hidden select boxes had time to update so:
$("#Model_395").change(function(){
wto = setTimeout(function() {
$("#Trim_395").trigger('chosen:updated');
}, 500);
});
Solved the problem. Thanks to anyone who looked :)

How to create dynamic select field with blank option and unfiltered state

I need to create a dynamic select field in Rails 3.2, where the options available in the second fields (states) depends on the value of the first (country). I've referred to the revised version of this Railscast, and am using the following code:
jQuery ->
$('#person_state_id').parent().hide()
states = $('#person_state_id').html()
$('#person_country_id').change ->
country = $('#person_country_id :selected').text()
escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/#])/g, '\\$1')
options = $(states).filter("optgroup[label='#{escaped_country}']").html()
if options
$('#person_state_id').html(options)
$('#person_state_id').parent().show()
else
$('#person_state_id').empty()
$('#person_state_id').parent().hide()
I need to make two changes to this code, which I think should be pretty straightforward for someone with stronger javascript skills than I have.
In the filtered list, I need to include a blank option. Currently selecting a country results in the first state state in the filetred list being selected. I need to leave the prompt "please select". How can I do this?
EDIT
SMathew's suggestions helped here. I'm using $('#person_state_id').html(options).prepend('<option></option>') which, together with a prompt attribute on the html tag, acheives the required result.
If no country is selected (ie the else statement) person_state_id should contain a complete, unfiltered list of all states. I've tried:
else
$('#person_state_id').html(states)
But this is not behaving as expected. I'm having these issues.
If I select a country that has associated state records, #person_state_id options are correctly filtered (and with smathews suggestion, a prompt is included).
If I select a country with no associated state records, #person_state_id contains all states, a blank option in the markup, but the first state option is selected by default. (It should be empty, with a blank option selected by default and a prompt displayed).
If I clear the selection in #person_country_id, #person_state_id contains an unfiltered list of all states (correct), and an empty option in the markup (correct) but the first state record is selected by default (should be a prompt).
How can I resolve these issues?
Thanks

Try
...
if (options) {
$('#person_state_id').html(options).prepend('<option>Please select</option>').parent().show()
} else {
$('#person_state_id').html(states).prepend('<option>Please select a state</option>').parent().show()
}

To deal with my second problem, I added the following coffeescript
jQuery ->
resetCountry = ->
$('#person_state_id').select2 "val", "0"
$('#person_country_id').bind("change", resetCountry);
This, coupled with smathew's answer, seems to be working
(I'm using select2 to format my select fields. You'll need a different approach to set the value if not using select2)