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/
Related
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');
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 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 });
});
I have two select elements, with same number of options, and same values for these options, but different (translated) texts.
How can I copy selection from one to another?
From user perspective, if someone will select "red" (value=1) and "brown" (value=5) in English select, I want "rubrum" (value=1) and "rufum" (value=5) to appear selected in Latin select.
For <input> tags, this works:
$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.val( $(this).val() );
Sadly, this omits <select> tags.
I found many ways to copy items, but can't find a way to copy actual selection.
Fiddle here: http://jsfiddle.net/e53aJ/8/
Edit: I'd love it to work both for single and multiselect, if possible. I know at first I did not reflect that in my fiddle, sorry.
I saw your html markup there you supplied all option values to 1 that should be in order like below:
Html:
<div class=".common-identifier">
<select name="english" class=".common-identifier">
<option value=1>red</option>
<option value=2>green</option>
<option value=3>yellow</option>
<option value=4>blue</option>
<option value=5>brown</option>
</select>
<select name="latin" class=".common-identifier">
<option value=1>rubeum</option>
<option value=2>viride</option>
<option value=3>flavus</option>
<option value=4>caeruleo</option>
<option value=5>brunneis</option>
</select>
</div>
jQuery:
$('select[name="english"]').on('change', function () {
$('select[name="latin"]').val(this.value);
});
Fiddle
<select> elements have a property selectedIndex that indicates which of their options is selected.
If you get the selectedIndex of the one <select>, then set the selectedIndex of the other <select> to that, you should get the result you're looking for.
However, if your <select> accepts multiple selections (as your question implies), then it's a bit more tiresome. You have to loop through the <option> elements and check each one to see whether it's selected property is true.
(This is why jQuery's popular: the JavaScript DOM interface frequently sucks.)
$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.attr('selectedIndex', $(this).attr('selectedIndex'));
html code:
<select>
<br>
<option>1</option><br>
<option>2</option><br>
</select>
This select will default display the first option item(display 1).
Now i want to change select to display the second item by jquery when dom is ready, but i tried several times, all failed.The following is my attempt:
$('select').prop('selectIndex', 1);
$('option').eq(1).attr('selected', 'selected');
$('option').eq(1).prop('selected', true);
default set select's style to 'display:none' in html code, then try above three ways and finally invoke $('select').show()
Maybe, i am only setting the dom value, not tell browser to refresh 'select'.
Do you konw the other way to refresh default display option in select?
You have to add values to your options from select.
<select>
<option value="1">First</option>
<option value="2">Second</option>
</select>
Then, just set the value "2".
$("select").val("2");
Or, you can do this simply setting the second value from select.
$("select").val(2);
See the working example here.
This is enough
$("select").val(2);
i think you want to select option 2 when page is load.
<select>
<option>1</option>
<option selected="selected">2</option>
</select>