I have a list of names to display in a browser:
Alan, Ben, Cindy, Dan, Ellen, Fred.
I'd like the user to be able to select male or female.
Then I'd like the name(s) of people who are that gender to change colors, or become highlighted.
Is there a way to do this with JavaScript?
If i understand you correctly, you can do following:
// step 1 create list of names with classes
<ul>
<li class="person male">Alan</li>
<li class="person male">Ben</li>
<li class="person female">Cindy</li>
</ul>
// step 2 create dropdown list of genders
<select id="my-dropdown-id" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
// step 3 simple jQuery script
<script type="text/javascript">
$('#my-dropdown-id').change(function() {
$('.person').removeClass('selected');
$('.' + this.value).addClass('selected');
});
</script>
<style>
.selected{
background: yellow;
}
</style>
This is a very simple solution, though i believe it implements your idea at least theoretically.
Related
I have a dropdown where I need to make first value in the dropdown to be bold.Dropdown code is as follows.
<div class="col-xs-3">
<select-box id="ad-version-select" options="curItem.stats.version" model="state.version" initial="All" change="watchvalue()" ng-disabled="state.partialDisable"></select-box>
</div>
<select class="form-control" ng-model="model" ng-change="change()">
<option ng-if="initial.length" ng-bind="initial" value=""></option>
<option ng-repeat="option in options" value="{{getValue()}}" ng-selected="model==getValue()" ng-bind="getTitleVariable()"></option>
</select>
I tried like
<style>
div.col-xs-3>div:first-child {
font-weight: bold;
}
</style>
but didn't worked. I am not getting any idea how to make only the first value bold. I can't use jquery. Can someone help me with this?
There need to be an alteration done in your css selector. You should select the first child of the option to make it bold.
option:first-child
{
font-weight: bold;
}
Here is the sample Fiddle
Hope this helps.
-Help :)
You can use ng-options with ng-class:
<select ng-model="Blah">
<option ng-repeat="person in persons" ng-class="{red: person.id == 1}" ng-selected="{Blah == person.Name}">{{person.Name}}</option>
</select>
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.persons = [
{id: 1, Name:'John',Eligible:true},
{id: 2,Name:'Mark',Eligible:true},
{id: 3,Name:'Sam',Eligible:false},
{id: 4, Name:'Edward',Eligible:false},
{id: 5, Name:'Michael',Eligible:true}
];
$scope.Blah = 'Sam';
}
]);
Here is the Plunker
#Help's solution should work.
But not all browsers support styles in <select><option>. Maybe you need to build the component by yourself, something like this:
<div class="select">
<div class="selected" ng-bind="current.title"></div>
<div class="options">
<div class="option" ng-repeat="option in options" value="{{option.value}}" ng-bind="option.title" ng-click="current=option"></div>
</div>
</div>
.option:first-child {font-weight: bold;}
You'll need to add some more scripts and styles to make it work like a natural <select>.
I am trying to retrieve data-cost("#packages") and append it to #form next to Ticket-price. I am not getting any errors in console. I can't seen to understand what went wrong.
JS:
<script src="jquery-1.11.2.js"></script>
<script>
$(document).ready(function()
{
var price=$("#packages").data("cost");
var amount=$("<span>"+price+"</span>");
$("#form").next().next().append(amount);
});
</script>
HTML:
<div id="packages">
<h2><u>Tourism Packages:</u></h2>
<ul>
<li data-name="Southern Travels">Travels Name: Southern Travels</li>
<li data-cost="2000">Cost per person: 2000</li>
<li>Duration: 3 days & 4 nights</li>
</ul>
</div>
<div id="form">
<label>Number of persons </label>
<input id="input"type="text"/ autofocus>
<p id="ticket-price">Ticket Price</p>
</div>
For this to work as it is, you must edit your HTML as following:
<div id="packages" data-name="Southern Travels" data-cost="2000">
<h2><u>Tourism Packages:</u></h2>
<ul>
<li>Travels Name: Southern Travels</li>
<li>Cost per person: 2000</li>
<li>Duration: 3 days & 4 nights</li>
</ul>
</div>
Either that, or access the data properties of the <li> elements instead of the div#packages (i.e #packages ul li instead of #packages)
$(document).ready(function() {
// Targeting 2nd li element inside #packages
var price=$("#packages li").eq(2).data("cost");
// create a span element with text 'price'
var amount=$("<span>"+price+"</span>");
// append as last child of the form
$("#form").append(amount);
});
You need to look for your data attribute by name - and look at the LI's.
You also need to build your html string and append it properly to the #ticket-price
WOKING EXAMPLE (FIDDLE): http://jsfiddle.net/ojLo8ojz/
JS:
$(document).ready(function(){
var price = $("#packages li[data-cost]").attr("data-cost");
var amount = "<span> "+price+"</span>";
$("#ticket-price").append(amount);
});
I have the following form in my AngularJS app:
<li ng-repeat="device in devices track by $index">
<div class="db-handset-image">
<span class="phone-silhouette"></span>
{{ relative image here }}
</div>
<div class="db-device">
<ul class="opts">
<li>
<select name="manufacturer[ [[$index]] ]" ng-model="selectedManufacturer" ng-change="getManufacturerModels(selectedManufacturer)">
<option value="">Manufacturer</option>
<option ng-repeat="manufacturer in manufacturers" value="[[manufacturer.id]]">[[manufacturer.name]]</option>
</select>
</li>
<li>
<select name="device[ [[$index]] ]" ng-model="selectedModel" ng-change="loadModelImage(selectedModel, $index)">
<option value="">Model</option>
<option ng-repeat="model in manufacturerModels" value="[[model.id]]">[[model.model + ' ' + model.variants[$index].memory + ' ' + model.variants[$index].colour]]</option>
</select>
</li>
</ul>
</div>
</li>
What happens in this form is that a user will select a manufacturer from the first dropdown and a model from the model dropdown. The model dropdown will populate with the relative models after a manufacturer has been selected using Angular's $filter.
When the user has selected a model, loadModelImage is fired and what needs to happen here is that after a model selection, that model image is then loaded into the {{relative image here}} placeholder. This is currently being done like so:
$scope.loadModelImage = function (modelId, $index) {
$http.get(ajaxurl + '?action=get_handset&hid=' + modelId)
.success(function (data) {
$scope.selectedHandsets++;
$scope.modelImages.splice(0, 0, data.handset.images);
})
}
This issue with this is that if I replace the relative image here placeholder text with an <img> loading in the model images, each model that's been selected appears in every row.
My other issue is that if you remain on the same 'row' (see below screenshot) and change the handset image, another array of images is pushed to $scope.modelImages when it in fact the images for that 'row' should effectively be overwritten with the new selection.
To give you a clear understanding of how the form looks, here's a screenshot:
When you click 'add new handset' the row containing the dropdowns is visually duplicated and you can add select another handset.
I hope my problem's explained clearly enough, any Q's ask.
I'd like to show the content of the selected options in the span tags with corresponding id's.
So when you choose Chocolate as your ice cream flavor and Caramel as your topping, the text at the bottom will change to:
"I love Chocolate ice cream with Caramel".
<ul id="icecream" style="list-style:none;line-height:30px;">
<li>
<select id="icecream">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="strawberry">Strawberry</option>
</select>
</li>
<li>
<select id="topping">
<option value="sprinkles">Sprinkles</option>
<option value="chocolatedip">Chocolate Dip</option>
<option value="caramel">Caramel</option>
</select>
</li>
<li>I love <span id="icecreamFlavor"></span> ice cream with <span id="toppingFlavor"></span>.</li>
</ul>
Does anyone know of a javascript that can do this?
Update:
- Without using jQuery.
- Vanilla, Chocolate, Strawberry, Sprinkles, Chocolate Dip, and Caramel don't have to be displayed in bold.
- The first option in the select list is shown as default. I.e.:
"I love Vanilla ice cream with Sprinkles".
Add the following code in javascript
$('#icecream').change(function(){
$('#icecreamFlavor').text($(this).val());
});
$('#topping').change(function(){
$('#toppingFlavor').text($(this).val());
});
Add the following code in css
#icecreamFlavor, #toppingFlavor{
font-weight:bold;
font-style:italic;
}
Here's one way:
<!doctype html>
<html>
<head>
<script>
// wait for DOM content to finish loading
window.addEventListener( 'DOMContentLoaded', function DOMContentLoaded() {
// no need to listen anymore
this.removeEventListener( 'DOMContentLoaded', DOMContentLoaded );
// get the DOM elements
var icecream = document.getElementById( 'icecream' );
var topping = document.getElementById( 'topping' );
var icecreamFlavor = document.getElementById( 'icecreamFlavor' );
var toppingFlavor = document.getElementById( 'toppingFlavor' );
// define an event listener that changes our output based on the selected options
var onSelectChange = function( event ) {
icecreamFlavor.textContent = icecream.options[ icecream.selectedIndex ].textContent;
toppingFlavor.textContent = topping.options[ topping.selectedIndex ].textContent;
}
// listen for the change events with the event listener
icecream.addEventListener( 'change', onSelectChange );
topping.addEventListener( 'change', onSelectChange );
// initialize our output
onSelectChange();
} );
</script>
</head>
<body>
<ul style="list-style:none;line-height:30px;">
<li>
<select id="icecream">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="strawberry">Strawberry</option>
</select>
</li>
<li>
<select id="topping">
<option value="sprinkles">Sprinkles</option>
<option value="chocolatedip">Chocolate Dip</option>
<option value="caramel">Caramel</option>
</select>
</li>
<li>I love <span id="icecreamFlavor"></span> ice cream with <span id="toppingFlavor"></span>.</li>
</ul>
</body>
</html>
fiddle demo
P.S.: Your <ul> had a conflicting id (icecream), so I had to remove it.
Updated Answer
Updated Javascript Demo
Change your 'ul' element id as 'iceCreamList' as there should be unique ids for html elements to identify them. Try this,
function selectIceCream(that){
var iceCreamType = that.options[that.selectedIndex].text;
document.getElementById('icecreamFlavor').innerHTML = iceCreamType;
};
function selectToppings(that){
var toppingType = that.options[that.selectedIndex].text;
document.getElementById('toppingFlavor').innerHTML = toppingType;
};
Also, you should consider placing the default options in your select list.
I am working on a time table where users can update their opening hours.
I have select boxes per day with 'open' or 'closed', and after this time select boxes with 'from' and 'till'.
I want to make it so if a user select for example wednesday: 'closed', the till and from select boxes (list items in this .time_row) are hiding.
My HTML for each day:
<div class="time_row">
<label>Monday:</label>
<li>
<select>
<option value="open">Open</option>
<option value="closed">Closed</option>
</select>
</li>
<li>
From:
</li>
<li>
<select>
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
etc
</select>
</li>
<li>
Till:
</li>
<li>
<select>
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
etc
</select>
</li>
</div><!--End time_row-->
I have tried to make it with jQuery .slice() but then he hides all list elements after this select box and before?
// Account time table
$('.time_row select').change( function() {
if( $(this).val() == 'closed' ) {
$('.time_row li').slice(3).hide();
}
});
Can someone help me with this?
Thank you!
I assume you are looking for something like that:
$('.time_row').find('select:first').change(function() {
$(this)
.closest('.time_row')
.find('li')
.slice(1)
.toggle(this.value === 'open');
}).change();
In this case on change event you search for the <select> closest parent element with class .time_row. Then pick up all inner <li> elements, remove the first from the list with slice(1) and either show or hide the rest upon the condition this.value === 'open'.
You should also check your markup and put all <li> elements inside <ul> to make it valid.
In the updated answer I have included the correct selector to select only first <select> elements (ignoring time selectors) and added the by default state with triggering change event after binding.
DEMO: http://jsfiddle.net/mPNCA/1/
You can do (untested):
$(".time_row select:first").change(function() {
if (this.value == "closed") {
$(this).closest(".time_row").find("select").not(this).hide();
}
});