I want to have a dropdown that lists different bird species and I want each option to display a unique paragraph and image for that species. The below code is almost working for me, however on page load I would like the first option to be automatically selected.
How do I do this?
Is this the best way to go about this?
I am new to this and any help would be much appreciated. Thanks
https://jsfiddle.net/h0m0cpxk/
<html>
<body>
<select id="opts" selected="selected" onchange="document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')">
<option value="buzzard" extrainfo="The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic">Buzzard</option>
<option value="redkite" extrainfo="The red kite is a medium-large bird of prey in the family Accipitridae, which also includes many other diurnal raptors such as eagles, buzzards, and harriers">Red kite</option>
<option value="sparrowhawk" extrainfo="Habitat and food availability remain the main limiting and controlling factors of sparrowhawk numbers">Sparrow hawk</option>
</select>
<div id="ExtraInfo">extra</div>
</body>
</html>
One simple way is to add the the first option text to your ExtraInfo div by default. Since the first option in a select list is automatically selected when page is loaded, it will serve your purpose.
<div id="ExtraInfo">The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic</div>
The first option will automatically be selected. You might not need to trigger the change event here. You can just write the first paragraph into the <p> in HTML; it will be overwritten when you select a different option.
The other way to do it is to trigger the onchange event via Javascript on page load. This is a bit tricky without jQuery, see this question:
https://stackoverflow.com/a/2856602/5742681
Related
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.
I need to create a simple dropdown menu which combined with a text box (example 100px below it) should show the info related to that choice when selected. I'm thinking about displaying the info in simple text, then customize it with CSS. To achieve this result should i create different classes/variables in Javascript or is there a way to do that just with HTML and CSS? (Or is there a better way to do this?) I have no idea even how to start this. I suppose i'll have to study a lot of Javascript to do this in the end, but if you are aware of any good resources, please, even a link to a nice tutorial would be very much appreciated!
My knowledge of Javascript is basic if not slightly over zero.
Thank you very much for all your help.
If you want to create it fast, despite understanding what is really going on, you should try to use Bootstrap, here is a link for an example of what you want to do.
Otherwise, you can find multiple tutorials online that would explain how to achieve something like this using pure css or javascript (example).
I tried what I got from question correct me if I understood something else.
You can write HTML like
<select id="opt">
<option> NO 1</option>
<option> NO 2</option>
<option> NO 3</option>
</select>
<input type="text" id="info" value="No1 info"/>
And using jquery you can get the value what user selected and then according to that display the information.
$("#opt").change(function(){
var choice=$(this).val();
$("#info").val(info(choice));
})
var info=function(choice){
var iz ;
switch(choice){
case "NO 1":iz="No1 info";
break;
case "NO 2":iz="No2 info"
break;
case "NO 3":iz="No3 info"
break;
}
return(iz);
}
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 have a website on which I insert an select with option for the user to choose and each of the options picked will result in a change in the page background's color.
Also I have a navigator to move between 2 pages (for example, page with title "Tittle A" and another with the same DOM structure but its title "Title B")
The option includes "iA, iB, iC" items.
The problem is like this,
in page A, if I choose one option, e.g iB to change the background color, then I pick the navigator to select page B, I will still see the selected iB although the background is refreshed into page B.
Anyone any idea please. I believe this is a cached issue but I have no idea how to resolve this with maybe a piece of javascript [jquery] code or means to flush the cache each time the page is refreshed. Thank you
I think that it's a cache effect. To solve this problem try to select needle option by js. Something like this:
$(function(){
$('#your_option_id_for_example_iA').click();
})
It's due to a "feature" in modern browsers that remember you selection/input in input fields. It's called autocomplete. To prevent the browser to remember you choice, you need to turn it off. It can be done with HTML or JavaScript/jQuery.
HTML:
// For just a specific element
<input type="text" autocomplete="off" />
// For an entire form
<form autocomplete="off">
jQuery:
$('input, select').attr('autocomplete', 'off');
You can read more about it here:
https://developer.mozilla.org/en/docs/How_to_Turn_Off_Form_Autocompletion
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