We Keep Coding

How do you select an option value from a select box if you know the value?

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

DDSlick 'selected' attribute ignored on <select> element

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

How to make a popup from unlisted option form [duplicate]

I want to make input option in select tag so user can choose between options or insert different value.
Is it possible?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
**<insert user value>**
</select>

HTML solution with "list" attribute:
<input type="text" name="city" list="citynames">
<datalist id="citynames">
<option value="Boston">
<option value="Cambridge">
</datalist>

You will have to use javascript to get the additional value. Check this post for some example code:
Jquery dynamically update "other" option in select

Select elements can't contain anything other than option or optgroup elements. Here's a ref to the spec http://www.w3.org/TR/html5/forms.html#the-select-element
You may be better off adding an option for "other" in your dropdown and then using JS to detect for that choice to dynamically show an input (below the dropdown) for a custom value.

Position an input box over the select box and remove the border of the input box. Make the length of the input box shorter than the select box so that the select box may still be used at its end.
Use the oninput event to detect input being entered in the input box. On each keystroke check for a continuing match in the select box. When a match no longer exists there is no further need for the select box.
The server will expect to receive both the text box input, if any, and the select box input, if any, and should use the select value if provided otherwise the input value if provided.

Show first character of selected option in Select

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

how to replace standard multiselect options with checkbox dropdown

I want to replace standard multiselect options ( which we have to keep pressed command button and then select multiple options ) with checkbox dropdown (that when i check the item, all the checked items are displayed in the header).
I have the following select options
<select multiple="" class="multimenu">
<option value="a">Playing</option>
<option value="b">Singing</option>
<option value="c">Listening</option>
<option value="d">Sleeping</option>
<option value="e">Chatting</option>
</select>
Now i want to replace the above such that there is a checkbox with each item.. and all the checked item(s), when checked, are displayed in the header.
I just want to transform the functionality, interface just same as normal single select select options but the only difference is, there is a checkbox infront of each item,, and when i tick the checkbox, each of the ticked item(s) is displayed in the header.
How can i attempt the same..??

If you want to handle your form data using a select box, but would prefer to display it to the user as a dropdown list with checkboxes for selecting each option, look no further than Dropdown Check List:
https://code.google.com/p/dropdown-check-list/