Using select2.js I have a dropdown menu that works great except for one thing: On load I cannot click on the first option in the dropdown menu and have it show as the current selection. When clicking on the first option, nothing happens and if the dropdown loses focus, the placeholder fills the box. If any other of the 40 options are selected, that value text is displayed in the dropdown box and I can use that value in my app.
After an option (other than the 1st one) is selected and I click on the first option again, then the first option value is displayed in the box and I can use it without issue. This issue occurs only on load.
JS
$('.selectArea').select2({
placeholder: 'Area #',
allowClear: true,
disabled: false
});
I have filled the dropdown using a local json file:
$.getJSON('areaList.json', function(json) {
for(i = 0; i < json.length; i++){
$('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
}
});
HTML
<select class="selectArea" style='width: 120px; font-family: Arial'></select>
My goal is to be able to load the page with the placeholder in the dropdown box, then be able to click the first option and have it fill the box so I can use that value for other parts of the app.
Any help would be greatly appreciated.
You need to trigger the change event after adding new options to an empty drop down.
I was unable to remove the first option as selected, the attribute selected is not even rendered in web inspector. I was forced to remove the first option as selected because my validation was failing on select2.
What I did to solve the issue is:
After populating the options, I added a new option on top of all the other options and added the selected attribute to it. Immediately after that, I've remove it: Code below:
$(".countries").prepend('<option selected class="placeholdered" value="">Select from the list of countries</option>');
$('.countries').select2().trigger('change');
$('.countries option').removeAttr('selected');
Please notice that I've triggered a select2 change before removing the selected. No need for placeholder...
Related
As you can see on this link there is a bootstrap select box option which allows you to do live search for select box and find the option which you want.
The thing which i want and i don't have is searching on this table automatically with jQuery or JavaScript code.
If you didn't understand what i meant yet, there is an example :
$(".selectpicker").selectpicker('val', "test").selectpicker('refresh');
As you can see this code , this code will change the value of bootstrap select box option and then its will refresh it so select box value will change and the option on it which has value="test" will become selected and the bootstrap select will work well and you can deselect the option.
The thing which i want is search something after we refresh the select box with this code .selectpicker('refresh');.
Do you want to know why do i need something like this ? Because i using bootstrap select on my project and the select box has some options like Select All and when a user choose this option this code will be happen :
$(".selectpicker option").attr("disabled",true);
$(".selectpicker").selectpicker('val', "Select All").selectpicker('refresh');
And after this code happens the option of select box will be disabled and its ok but the problem is the select box have to refresh for showing that all of options disabled because all of them selected already and after refresh happens its will clear the search result and the search input will be still stay in the same thing which user searched in before but its not searching it anymore. And the thing which i want will fix this problem i mean i want to make it search the thing which user searched before after refresh.
The code which i looking for is something like this :
$(".selectpicker").selectpicker('search', "Some words").selectpicker('refresh');
Thanks.
$(document).on("change","#select-picker",function(){
$search_value="blob blob";
$("button[data-id='"+$(this).attr("id")+"']").next().children(".bs-searchbox").children("input[type='search']").val($search_value).trigger('propertychange');
});
// Bootstrap-select v1.13.9
I have a select dropdown initially when loading a web page. On clicking the dropdown I need to change that to select2 dropdown. However, instead of single click, double click converts the select to select2 dropdown. Can anyone help me where I am going wrong? Here is the code.
$('#select_id').on('click', function(){
$(this).select2().select2('open');
});
Jsfiddle : https://jsfiddle.net/hwsjz56o/5/
I've been looking for a way to style select boxes based on their selected option. The data is coming in from Django so there are populated fields on load.
I've been using this javascript/jQuery solution with some success.
Style <select> element based on selected <option>
The basic idea is that the selected option value is moved to a class in the select box so you can style off that class.
What I've done here is duplicate the code into two sections. Once to run on load and another to run on change.
$('select').attr('class', '').addClass($('select').children(':selected').val());
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
This doesn't seem to work for multiple select boxes on load.
What happens is the on load code finds the first select box and then adds the class to all select boxes on the page, so basically it doesn't iterate over all select boxes and run one by one.
The second bit runs fine based on changing the select value.
Here is a fiddle http://jsfiddle.net/9sx6fos7/
As you can see both boxes take the class of the first on load.
Thank you!
I've got several rows with each having its own drop down. When the dropdown is changed I would like to alert out the ID and the value selected from the drop down.
So I've added an observes on the property and it seems to work fine.
However, on the initial page load it alerts the ID and value of all the drop downs.
How can I make it stop alerting everything on the initial page load? Example here: http://jsbin.com/idevUCU/4#/posts/all
Sure. just add the prompt option to your select:
{{view Ember.Select
contentBinding='App.names.content'
selectionBinding='selected'
prompt="Select"}}
you can replace "Select" with whatever you want.
I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.
Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.
You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here