populate selected options dynamically in multiselect dropdown using javascript - 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.

Related

dropdown options change based on another dropdowns choices

I have a form that has several dropdowns. I need to make the second dependent on the value of the first. I have a Codepen that shows four dropdowns. The first does not change but the selects 2, 3, and 4 show the intended options I want.
Here is a listing of what option of dropdown 1 leads to the second.
new -> input-2
client -> input-3
admin -> input-4
I am doing this in OpenCart in a MVC so I am a little confused if this all is done in the view file or do I need to have some of this done in the controller, and if so how? I do believe JavaScript would be able to help here but not really sure how to implement that. My code pen is:
https://codepen.io/anon_guy/pen/pdbYad
<form action="/action_page.php">
<select name="Input-1">
<option value="*"></option>
<option value="new">new</option>
<option value="client">client</option>
<option value="admin">admin</option>
</select>
<select name="Input-2">
<option value="sign-up">Sign Up</option>
</select>
<select name="Input-3">
<option value="upgrade">upgrade</option>
<option value="stats">stats</option>
</select>
<select name="Input-4">
<option value="view-accounts">view all</option>
<option value="add">add</option>
<option value="remove">remove</option>
</select>
<input type="submit">
</form>

Chrome console script to select options in a drop down menu

I have a page with a lot of food items there are a few options for me to select for each food item. I want to sequentially select Order for everything on the menu. Is there a script to make this happen? Thanks!
<select class="form-control" onchange="setFlag(999$(this).val(),$('option:selected', this).html());"> </select>
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>
HTML
<select id="sel">
<option value="Order"> Make this order </option>
<option value="Veto"> Veto this order </option>
</select>
JS
document.querySelector("#sel").value = "Veto" // selects 2nd option from dropdown
I would take a look at this answer https://stackoverflow.com/a/6068322/1115876
something like
$('[value="Order"]').prop('selected', true)
should work

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

Javascript Jump (show/hide)

Don't have any programming experience and only basic html/css.
I'm trying to create a javascript menu (open to suggestions if there is a easier way?) that will show/hide based on the option selected in the first menu?
I have the following ...
<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="#" selected>Quick Links</option>
<option value="menu1">menu1</option>
<option value="menu2">menu2</option>
<option value="menu3">menu3</option>
</select>
<select name="menu1" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt1-1.html">opt1</option>
<option value="http://www.site.com/opt1-2.html">opt2</option>
<option value="http://www.site.com/opt1-3.html">opt3</option>
</select>
<select name="menu2" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt2-1.html">opt1</option>
<option value="http://www.site.com/opt2-2.html">opt2</option>
<option value="http://www.site.com/opt2-3.html">opt3</option>
</select>
<select name="menu3" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt3-1.html">opt1</option>
<option value="http://www.site.com/opt3-2.html">opt2</option>
<option value="http://www.site.com/opt3-3.html">opt3</option>
</select>
</form>
Can someone explain how i can ....
-show/hide menus 1-2 based on which option is selected in 'menu'???
Thanks inadvance!
Consider using a ready-made dropdown menu as a solution. Some links:
38 jQuery And CSS Drop Down Multi Level Menu Solutions: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
22 Best jQuery Dropdown Menus: http://slodive.com/web-development/best-jquery-dropdown-menus/
Alternatively, you could write your own solutions, say, with jQuery. For more information on this, see for example tutorial for a "Simple jQuery Dropdown Menu".

Categories

Resources