Develop Reference

populate selected options dynamically in multiselect dropdown using javascript

I need a multi-select drop-down list with a checkbox which will allow a user to select multiple options without pressing command/ctrl buttons please help on this
<select id='testSelect2' name="test" multiple>
<option value='1'> sunday</option >
<option value='2'> monday</option>
<option value='3'> tuesday</option>
<option value='4'> wensday</option>
<option value='5'> thrusday</option>
<option value='6'>friday </option>
<option value='7'>saturday </option>
</select>
enter image description here

If you are using bootstrap, you can use this plug in http://davidstutz.de/bootstrap-multiselect/
If you want to do this with vanilla javascript, you may try to handle click event on options and achieve this behaviour manually.

how to prevent conflict beetween two jquery plugin

I have two jquery plugin
Image Picker link and select2 link
when i use the both of this plugin one of them is cannot run
here is my code
jquery code
$(".select2").select2();
$(".imagepicker").imagepicker();
select menu for select2
<select class="select2">
<option value="1">One</option>
<option value="2">Two</option>
</select>
select menu for imagepicker
<select class="imagepicker">
<option data-img-src="img/01.png" value="1"> Page 1 </option>
<option data-img-src="img/02.png" value="2"> Page 2 </option>
<option data-img-src="img/03.png" value="3"> Page 3 </option>
</select>
I don't know what is happening, but when I use the both of this plugin one of them is not working, maybe because in same select tag?
I am sorry my english is bad

The thumb rule is that your last plugin loaded would overrun the previous segment.

Selected only one values

i have:
<select id="number" name="number">
<option value=""></option>
<option value="1">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
and next with jQuery i use for example:
$('#number').val(1);
but this add next value - 1 and now i have:
<select id="number" name="number">
<option value=""></option>
<option value="1" selected="selected">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
what i must use with:
$('#number').val(1);
that all others value can be not selected? So i would like - if i set new val then all others values can be reset. Maybe use each for reset, but how?
I know - this should be multiselect = false, but this is not my code - i must use this this jQuery.

Are you using a multiple select? Because the HTML you've added indicates that you're not. If you're not working with a multiple select, then your HTML with several selected="selected" doesn't make any sense.
If you are working with a multiple select, then setting .val() should clear the other selections. (Demo). If in some weird browser it isn't, you could try manually resetting the select:
$('#number option').prop('selected', false).val(1);
If clearing the current selection is not what you want, then you should consider setting the selected property manually, rather than using .val()
$('#number option[value=1]').prop('selected', true);
Demo

Detecting when the user chooses an option from a dropdown

I have a classic HTML select box:
Show:
<select name="show" id="showThreads">
<option value="all" selected="selected">All</option>
<option value="new">Only unread</option>
</select>
Now, I need JavaScript to make an Ajax request when the user changes the selection in the box (without jQuery).
I have tried:
Listening for clicks on the <option> tags, but it won't work for users using a keyboard or a touch device
on an interval, looping though the <option> tags and checking if the selected one changes, but it seemed to trigger even when I simply hovered over the second option.
Is there a way of doing this that will work on all browsers/devices?
Thanks!

Try the "change" event.
document.getElementById("showThreads").onchange = function() {
};

Listen for onChange on the <select> tag.

function yourAjaxCall(something) {
}
<select name="choice1" size="1" onchange="yourAjaxCall(this);">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>

Setting conditional javascript for web form dropdown menu?

I have a web form that I'm applying both client and server side validation to and on this one text input field I'm looking for some way to have conditional code that sets a character limit based on what a dropdown menu is set to.
For example:
If Option 3 is selected, limit maximum character limit to 10.
<select>
<option>Option 1</option>
<option> Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<label>Text Field</label>
<input type="text" />
I've been experimenting with a number of pre-coded javascript / jquery validation scripts and they all work fine except when it comes to this particular need.
How can this be done?
Thanks for any advice.

Create a select onchange event that will set the maxLength of the input. You can use the option value as the value for the event. Example:
<select id="sel" onchange="document.getElementById('txt').maxLength = document.getElementById('sel').value;" >
<option value="3">Option 1</option>
<option value="5"> Option 2</option>
<option value="10">Option 3</option>
<option value="20">Option 4</option>
</select>
<br/>
<label>Text Field</label>
<input type="text" id="txt" value="" maxlength="3" />
You can test it here - http://jsfiddle.net/codefuze/R7RtJ/