I use this plugin.
http://dane.one/projects/jquery-dropdown/demo/#multi-select
https://github.com/daneWilliams/jquery.dropdown
I want use multiple select
$('select').dropdown({
multi: true
});
It's working normal, but initially, when the page was loaded if I have selected options
<select multiple>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
And I want add some selected options,
This plugin resets all selected, and I then seleced
And then chooses a new options without first selected.
I'm not sure if I understood you correctly, but, it looks like the option is selected, it just doesn't look selected?
Here's a CodePen with three examples: http://codepen.io/anon/pen/mWWWaO
The first one is an example of what you have, the option is selected by adding the selected attribute in the code. It is selected, and when you select other options, it stays, but it is not highlighted like the other ones.
The second example is just an example of what it is like with nothing selected, this was more for my own reference and testing.
The third one is a menu with no options set as selected, but instead, after the plugin is initialized it triggers a click event on the option you want selected.
A quick look at the plugin and it didn't look like there was a way to initialize it with options already selected and it also looks like there is no way to select an option programmatically through the plugin.
The plugin replaces the original menu with it's own code in order to create the menu and it looks like an option can't look selected unless it is clicked on, as opposed to the actual, hidden, menu being updated within the code.
I included the plugin JS in the CodePen, but not here. You can scroll to the bottom there to see the example JS code. You would probably want to set up a better way to mark those items as selected than the quick example I set up, but that's the general idea.
$('select').dropdown({
multi: true
});
// Select the third dropdown list and then find the second li in that list
$('.dropdown-list').eq(2).find('li').eq(1).trigger('click');
Use select2 instead. Its an awesome jQuery plugin both for longlist single value selects & multiple selects.
Related
I am trying to use a headless browser (Firefox Marionette) to drive a drop-down selection process on a website I do not control. The setup is as follows: there's
a drop-down menu where I can make a selection
a second drop-down menu that reloads when I click my selection in the first one, exposing more options than it initially displays.
Clicking in a browser works fine, but if I try to do this in a console, the second menu does not reload:
var sel1 = document.getElementById("1stmenu")
sel1.value="my selection"
sel1.selectedIndex=1
This changes the first drop-down menu appropriately, but does not trigger the 2nd menu's reload; the latter remains blank, displaying no options.
This had (essentially) been asked before, here. The first answer worked for me: the drop-down menu is something like
<select class="classname" id="idname" name="selname">
<option value="" selected="selected">----- Choose -----</option>
<option value="valuenamehere">Blah</option>
</select>
and what did the trick, after making jQuery available in the console, was
$('select[name="selname"]').val("valuenamehere").trigger('change');
Edit:
Even better: there's no need for jQuery at all, as documented in this earlier question (also in an answer to a duplicate question). All I had to do was
document.getElementsByName("selname")[0].value="valuenamehere"
document.getElementsByName("selname")[0].dispatchEvent(new Event('change'))
I am dynamically adding select elements in the webpage when a certain action is taken by the user. The problem is that as the select elements are added dynamically, the jquery is unable to make them searchable as it is applied when the document is loaded. How can I make the dynamically added select boxes searchable?
EDIT
I'm using select bootstrap for making the select element searchable.
What I am doing is making the user select multiple parts of an image using select areas and whenever an area is selected, I add a select element corresponding to that area. This is done using a custom javascript in the head of the page. However, these select elements are devoid of any styling as the are added dynamically.
The select bootstrap can make a select element searchable by using data-live-search -
<select data-live-search="true" name="category_name" class="selectpicker" >
You can use a plugin like Chosen. It is very easy to use, just include the files and call it like this:
$(".my-select").chosen();
And if you want to add options dynamically, you can take a look at this answer, which explains how to do it.
You can search for the elements with a selector, even if you bind them dynamically:
$('option').each(function(){console.log($(this).html())});
$('select').append('<option class="option2">test 2</option>');
$('option').each(function(){console.log($(this).html())});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option class="option1">test</option>
</select>
I have a three-level dependent dropdown built using AngularJS, as shown in this fiddle and in the following code.
<select ng-model="clock" ng-options="clock as clock.clockName for clock in dropdowns"></select>
<select ng-model="freq" ng-options="freq as freq.freq for freq in clock.freqs" ng-disabled="!clock"></select>
<select ng-model="rate" ng-options="rate as rate for rate in freq.rates" ng-disabled="!clock || !freq"></select>
The problem is that when I change the top level dropdown, it doesn't reset the third level dropdown. To replicate it, try selecting one value each in first second and third dropdowns. Then change the first dropdown, you can see that the second dropdown is reset, but the third is not.
Any suggestions?
You've just discovered an old bug: the model wasn't updated if the selected option was removed.
This odd behaviour has been corrected by this commit, in AngularJS 1.4.0-beta.0. You can simply update your version of the framework to solve your problem.
You should set null to last two model objects on change of the first select. Like that:
<select ng-model="clock" ng-options="clock as clock.clockName for clock in dropdowns" ng-change="freq=null; rate=null;"></select>
Fiddle
I have three dropdown select boxes. Each contains a different set of demographic attributes. I'd like to display a score corresponding to whatever combination of selections is made by a user. For example, if a user selects Male, 18-24, Asian-American, I want to hide the current div and display the div corresponding to that combination.
I have seen answers for how to do this with just one select box, but since I have three and there are significantly more combinations, I wanted to see if there was a simple way to do this efficiently. I can provide specific code if needed, though a general example of how to do this would be just fine as well - thanks!
Keeping hidden divs for all possible combinations is not a good idea. That will make your page size bigger. Why don't you get only the relevant information as needed using ajax and show it ?
In your page, keep only one div to show the information
<select id="Age">
<option value='1'>18-24</option>
<option value='2'>25-50</option>
</select>
<select id="Place">
<option value='1'>Asia</option>
<option value='2'>America</option>
</select>
<div id="info"></div>
Now listen to the change event of the dropdowns, get the selected value of dropdowns and make an an ajax call to the server page and get the markup to show to user. In the below script, I am using jquery load method to load the new markup in the info div.
$(function(){
$("#Age,#Place").change(function(e){
var age=$("#Age").val();
var place=$("#Place").val();
$("#info").load("yourServerPage.php?age="+age+"&place="+place);
});
});
Assuming you have a server page called yourServerPage.php which accepts the age and place from the querystring and return the markup for the information div.
I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax