I am using the following jQuery plugin:
http://designwithpc.com/Plugins/ddSlick
To show selectable images in a dropdown select box. It is working great apart from when I try to load the html with an option already selected, this option is not selected in DDSlick (so it just shows the first option as selected).
How can I transform:
<select class="homepage_icon" name="section_thumbnail[]" id="section_thumbnail4"><option data-imagesrc="../assets/images/homepage_icons/kidjockey-thumb.jpg" value="kidjockey-thumb.jpg"></option>
<option data-imagesrc="../images/homepage_icons/horse.png" value="horse.png"></option>
<option data-imagesrc="../images/homepage_icons/rosette.jpg" value="rosette.jpg"></option>
<option data-imagesrc="../images/homepage_icons/girl.png" value="girl.png"></option>
<option data-imagesrc="../images/homepage_icons/balloon.jpg" value="balloon.jpg" selected="selected"></option>
<option data-imagesrc="../images/homepage_icons/cake.jpg" value="cake.jpg"></option>
</select>
To actually show the selected option in DDSlick?
My plugin initialization is just the simple:
if ($('.homepage_icon').length) $('.homepage_icon').ddslick();
I assumed a selected option would automatically show in DDSlick but perhaps I'm missing something?
You can use the following to instantiate your drop downs:
$('.homepage_icon').each(function() {
var selectedIndex = this.selectedIndex;
$(this).ddslick({ defaultSelectedIndex: selectedIndex });
});
Related
When open nb-option-list first option is selected (or focused). I must be disable this function
In HTML5 you can select a disabled option
<option selected disabled>Selected and disabled</option>
Or you can add a hidden option in first position
<option hidden>First item</option>
Given the following jQuery plugin: http://selectric.js.org/index.html which replaces the functionality of that of a regular select box by using custom UL LI lists,
Based on the plugins documentation, I know that you can programmatically select an option value if you already know the index to select by using the following code:
$('#idofselectbox').prop('selectedIndex', 3).selectric('refresh');
But they do not include a sample to be able to find and select an option value by a value.
For example,
Let's say i'd like to select the option value named 'apples' without actually knowing its index in the select box. Is this even remotely possible?
<select id="idofselectbox">
<option value="oranges">oranges</option>
<option value="pears">pears</option>
<option value="apples">apples</option>
<option value="strawberries">strawberries</option>
</select>
You can set the value as if it's a regular combo box, then call refresh on selectic to refresh the UI.
$('#idofselectbox').val('apples').selectric('refresh');
I have a html select box with several options. Upon selection of an option I want Only the selected option and the first option to be shown in the select option dropdown. I know how to filter and show only one option but I cannot figure out how to include both option where the 'selected' option remains 'selected'. I have include snippets similar to of my code as well as a demo.HTML:
<select id="myDropdown">
<option selected>Select fruit</option>
<option>Grapes</option>
<option>Bananas</option>
<option>Oranges</option>
<option>Apples</option>
</select>
JS:
$(document).on('change', '#myDropdown', function() {
$('option', this).not(this,'option:gt(0)').siblings().remove(); });
I am trying to use the first option to perform another function 'on change' so I need the selected option to remain selected while the rest being filtered out except for the first. For example if 'Oranges' were selected, this is what you would see:
<select id="myDropdown">
<option>Select fruit</option>
<option>Oranges</option> //selcted value
</select>
BTW I am using jquery mobile to style as well.
jsfiddle
.not only takes 1 parameter. If you want to filter on two different selectors, you can add a comma between them inside the string. You can also use the :selected selector:
$('option', this).not(':eq(0), :selected').remove();
See Updated Fiddle: http://jsfiddle.net/znx9hxvu/9/
How would you go about having tags already being preselected in their selectbox at the time the page loads? Here's my code so far:
HTML:
<select class="selectBox operatingSystems" multiple="multiple">
<option>Windows</option>
<option>OSX</option>
<option>Linux</option>
</select>
JS:
$(".operatingSystems").select2({tags: true, tokenSeparators: [',', ' ']});
I'm basically trying to get it to look something like it does on the select2 documentation page where they have "orange" and "purple" preselected. From: https://select2.github.io/examples.html#data-ajax
You can select an existing option by setting the selected property.
<select class="selectBox operatingSystems" multiple="multiple">
<option>Windows</option>
<option selected="selected">OSX</option>
<option>Linux</option>
</select>
Would pre-select the OSX option in the select box. This isn't specific to Select2, it's how you set a pre-selected option in general for select boxes (both single and multiple select).
You can do this using vanilla JavaScript by setting the selected property on the element.
theOption.selected = true;
Or using jQuery's .val method for setting the value.
$("select").val(["OSX"])
In order for Select2 and other plugins to pick up the change in value, you may need to trigger the change event.
$("select").trigger("change")
I have a select box like this:
<select id="selectbox1">
<option value="s">Second</option>
<option value="m">Minute</option>
<option value="h">Hour</option>
<option value="d">Day</option>
<option value="w">Week</option>
<option value="t">monTh</option>
<option value="y">Year</option>
</select>
I want when I select for example 1st option second Just S appear on select box and so on.
and when its open for another select again show Second.
Try this:
Add one hidden option and on selection of option take the text of value and insert into hidden option and make it selected forcefully everytime.
$('#selectbox1').on('change', function(){
var option = $(this).find('option:selected');
$('.hide').text(option.val()).val(option.val());
$('.hide').data('value', option.text());
$('.hide').attr('selected', true);
});
To get the selected option value and text, you can this:
$(this).find('option:selected').val();
$(this).find('option:selected').data('value');
DEMO Link