I want to replace the languages in my div when I select a country.. Here's what I got so far but is not working
My fiddle is in the comment, i cant seem to past it here
Two changes you need to do 1. value should be 1,2,3
<ul class="country-list" id="country-list" onchange="getval(this);">
<li value="1" class="Germany">Germany</li>
<li value="2" class="Singapore">Singapore</li>
<li value="3" class="Philippines">Philippines</li>
</ul>
and
$(".country-list li").click(function() {
$('#country-dropdown').text($(this).text());
$('#country-dropdown').click();
console.log(('.d'+$(this).val()));
$('.lang').hide();
$('.d'+$(this).val()).show();
});
Related
I am trying to select individual selection and in hidden a input checkbox in an un-ordered list.
Issue: When I click on one it selects all instead of one
I need just like checkbox in list with hidden input checkbox
here is my code shared in jsFiddle
<ul class="checkbox_list">
<li>
ravi
<p>2343534656 - U44BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c1">
</li>
<li>
arvi
<p>2343534656 - U444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c2">
</li>
<li>
jiva
<p>2343534656 - 444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c3">
</li>
</ul>
You need to use clicked element context this to target correct element:
$('.checkbox_list li').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
});
Working Demo
I am attempting to create a HTML form that needs to be able to accept 160 possible values for a given field, this will need to be done over and over again so I want to make it as simple as possible to find the value that I need. Everything in my list can be grouped into sub categories, so I am imagining a multi-level drop down menu type approach like here. I have seen a plethora of how-tos and sites informing me on how to do similar things where I simply make an unordered list of unordered lists i.e.:
<ul class="mlddm">
<li>Entity Provider
<ul>
<li>Name</li>
<li>DBA</li>
<li>Entity Type</li>
</ul>
</li>
<li>Individual Provider
<ul>
<li>Name
<ul>
<li>Full Name</li>
<li>Prefix</li>
<li>First Name</li>
<li>Middle Name</li>
<li>Last Name</li>
<li>Suffix</li>
<li>Professional Suffix</li>
</ul>
</li>
<li>Birth Date
<ul>
<li>Full Birth Date</li>
<li>Day Of Birth</li>
<li>Month Of Birth</li>
<li>Year Of Birth</li>
</ul>
</li>
<li>Education
<ul>
<li>Institution</li>
<li>City</li>
<li>State</li>
<li>Country</li>
<li>Start Date</li>
<li>End Date</li>
<li>Graduation Date</li>
<li>Degree</li>
</ul>
</li>
</ul>
</li>
</ul>
and then apply some CSS and JS magic to the HTML to accomplish this.
This would be fine if I was using a menu to link me to another page, but I need to take a string value from what was selected and use it in a form. The problem is that I am fairly new to HTML and do not know how to extract what is selected from the above list and place it into my form (probably the easiest solution to this problem).
Another approach I have seen to this would be to indent the select list using styles and groups to create kind of a tree style view like this:
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
This would be a nice solution if I were presenting say 40 options at most but where I have 160 options this will be overwhelming and simply will not do.
The last solution might be to have drop downs that take from each other to limit the options in the next drop down like here.
This is also less than ideal as it requires us to select information hat does not actually get saved, it is simply to narrow options. I will take this option if all else fails but I am hoping that someone might be able to help me out.
I've use this jQuery plugin on projects in the past and it has worked a treat. There are lots of different options for the configuration, and all of the html is easily stylable with your own CSS if you don't like the default look.
I have the following categories displayed in a select box:
<form>
<select class="favoritefood">
<optgroup label="Dairy products">
<option>Cheese</option>
<option>Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option>Cabbage</option>
<option>Lettuce</option>
<option>Beans</option>
<option>Onions</option>
<option>Courgettes</option>
</optgroup>
</select>
</form>
Is there any way to go another level down, ie, a subcategory? I've tried using optgroup inside optgroup but it doesn't work.
Or just put one or more spaces -   - before your text in the option.
You should create a custom dropdown for this purpose. Here are the steps:
Hide the original dropdown with CSS (display:none;) OR create a hidden field that will contain the value selected by the user
<input type="hidden" name="selection" id="selection">
Create a unordered list (ul) with as many nested li and sub ul
<ul class="custom-drop">
<li class="option-group">
<ul>
<li class="heading">Vegetables</li>
<li>Cabbage</li>
</ul>
</li>
<li class="option-group">
<ul>
<li class="heading">Dairy products</li>
<li>Cheese</li>
</ul>
</li>
</ul>
Style this newly created ul as per your needs
Listen for the click event on li inside this ul and set the appropriate option inside the hidden dropdown OR set the value of hidden field so that it can be sent with the form.
So if you are using jQuery then do something like this:
$('body').on('click', '.custom-drop li', function() {
$('#selection').val($(this).text());
// Probably you want to handle showing/hiding the custom drop here
});
You cant go any deeper. It is not allowed for the optgroup.
Read this: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
I have made a dropdown menu with multiple checkboxes using bootstrap (see http://jsfiddle.net/rxdazn/ryzJb/3/ ). This dropdown menu will introduce the possibility to plot multiple graphs ("measures") on the same chart + multiple options (log scale etc.).
A list of values (corresponding to "measures") will be stored in a json object.
For now, I am just using a single select (users can only plot 1 chart, there are no graph type nor options):
<select ng-model="measure" ng-options="facet.path as facet.name for facet in station.facet_groups[0].facets"></select>
How can I best handle the fact that each measure type will have the same submenu?
Should I change my HTML? Should I dynamically generate values for <input> id attributes ?
<!-- graph type -->
<li class="dropdown-submenu"> Graph type
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="line" name="graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="dot" name="graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
Since an id must be unique on a page, you definitely should dynamically generate them; plus, you might also want to generate the name attribute in input element, but this is totally up to your use case. Based on you fiddle, I think you can generate your menu like this:
<ul id="menu">
<li class="dropdown-submenu" ng-repeat="facet in facets"> {{facet.name}}
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="{{facet.name}}-line" name="{{facet.name}}-graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="{{facet.name}}-dot" name="{{facet.name}}-graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
</li>
</ul>
I try to generate the id and name based on facet.name, you may want to change it to suit you needs.
I'm currently working on something to check a box and change the text next to it to a hyperlink once ticked
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<span>myLink</span>
</li>
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<spanmyLink></span>
</li> .. and so on
Hopefully from this you can gather i have 2 items, and i want one visible as default until checkbox is ticked and the hyperlink span tag takes over from the default span tag. That changes to style="display:none" other becomes style="display:block"
Now for the jQuery
$(window).load(function(){
$('.myCheckBox').click(function(){
//DO DOMETHING
});
});
But once I make the click event occur how to i gain access to these spans and such in order to change the styles of the various elements etc.
Thanks
You would go from this, which is the current element then use any of the tree traversal functions to move around the DOM, for example:
$(window).load(function(){
$('.myCheckBox').change(function() {
$(this).next("span").toggle(this.checked);
});
});
In the above we're using .toggle(bool) to do the hiding/showing, this allows us to hide/show the <span> depending on whether the checkbox we care about is checked.