I want to add a round symbol for every item in a dropdown . The color of the round symbol depends on a condition; if active ===1 the symbol should display in green otherwise in red.
Group: <select value={this.state.group} onChange={(e) => this.setState({ group: e.target.value, provider: })}>
<option value=''>Select</option>
{this.state.groups.map((item) => <option value={item.GRPID}><span><span style={item.active === 1?{color:'green'}:{color:'red'}}>●</span>{item.GRPName}</span></option>)}
</select>
Here is my code, the symbol is displaying but the CSS I applied is not working and also the symbol is displayed when we select an item from the dropdown, I don't need it too.
Here is a codesandbox to display a simple example https://codesandbox.io/s/practical-snyder-m9egg
Check it out.
Related
I have a php html drop-down with multiple columns. I want to apply each column different color.
<select name="comp">
<option value="" disabled selected>Select Company</option>
<option value="">Item - Company</option>
</select>
Expected Result :
"Item" should be in Red color
"Company" should be in Green Color
I have a select build by material-ui, all function is fine, but I want to alignt top line of select list to bottom line of input block, how could I do this?
My code :
const styles = theme => ({
formControl: {
margin: theme.spacing.unit
}
});
<FormControl className={classes.formControl} fullWidth={true}>
<InputLabel htmlFor="deviceSource-native-select">Device source</InputLabel>
<Select
native={true}
onChange={this.onDeviceSourceChange}
inputProps={{
id: 'deviceSource-native-select',
name: 'deviceSource'
}}
>
<option value={'Ten'}>Ten</option>
<option value={'Twenty'}>Twenty</option>
<option value={'Thirty'}>Thirty</option>
</Select>
</FormControl>
I have created a CodeSandbox that replicates your issue here: https://codesandbox.io/s/k279v04v3v
Unfortunately, using native={true} means that you are at the mercy of specific browser implementations as to how your select dropdown is displayed. You can't change it.
If you are willing to use a non-native select it will be possible by setting the following prop on your Select component:
MenuProps={{
getContentAnchorEl: null,
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
}
}}
Here's a fork of the above CodeSandbox with the select non-native and the above prop set: https://codesandbox.io/s/jpw77oo315
I'm trying to set the hover background color of the options inside select tag.
It seems that it has been difficult to do this, but is there any up to date way to do this?
I'm using mobx+react in my application
HTML:
return(
<select
className="selectDecoration"
name={ name }
value={ value }
onChange={ e => onChange( name, e.target.value) }
>
<option disabled hidden value={ name } >
<a>{ name }</a>
</option>
{ options.map( item =>
<option value={ item }>
<a>{ item }</a>
</option> )
}
</select>
);
It is impossible to inject CSS to option tag, because it is rendered by the Operating System and its Web browser, the select tag is so useful, especially in mobile design, but it is so hard to dealing with it.
For more information I proffer this link. you can use custom react library to implement a select like design. I used relect.
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
I want to set the value of an HTML <select> element reactively, without changing the various options for the element. I have found a solution, but it in not elegant.
To test, create a barebones Meteor app with create meteor select and change the contents of the select.html and select.js files to the following:
select.html
<body>
{{> select}}
</body>
<template name="select">
<label for="select">{{category}}</label>
<select id="select">
<option value='' disabled selected style='display:none;'>Select...</option>
<option value="Animal">Animal</option>
<option value="Vegetable">Vegetable</option>
<option value="Mineral">Mineral</option>
</select>
</template>
select.js
if (Meteor.isClient) {
Session.set("category", "")
Session.set("label", "Category")
Template.select.onRendered(function () {
setSelectValue()
})
Template.select.helpers({
category: function () {
setSelectValue()
return Session.get("label")
}
});
function setSelectValue() {
var select = $("#select")[0]
if (select) {
select.value = Session.get("category")
}
}
}
Now launch your app. In the browser console, you can change the value of the category Session variable:
Session.set("category", "Animal")
However, the select element will not update until you change the label:
Session.set("label", "category") // was "Category'
Now the select element updates, and any subsequent change the category Session variable will also update the select element.
Session.set("category", "Vegetable") // Now the select element updates
Is it possible to achieve the same effect directly, without using this clumsy workaround?
Yes. You can do it as follows:
<select id="select">
<option value="Animal" {{animalSelected}}>Animal</option>
<option value="Vegetable" {{vegetableSelected}}>Vegetable</option>
<option value="Mineral" {{mineralSelected}}>Mineral</option>
</select>
And helpers that looks something like this:
Template.select.helpers({
animalSelected: function () {
return (someCondition === true) ? 'selected' : '';
},
vegetableSelected: function () {
return (someOtherCondition) ? 'selected' : '';
}
});
A better way might be something like this though:
<select id="select">
{{#each options}}
<option value="{{value}}" {{selected}}>{{label}}</option>
{{/each}}
</select>
And then you can use this in the helpers to decide what is selected and what isn't.
Another option is just using standard jQuery to change the select box. Something like this:
$('[name=options]').val( 3 );
Or this SO answer.
If you want the selection set dynamically I usually use a handlebar helper like this
Template.newtask.helpers({
filler: function(element){
return Session.get(element);
}
});
then in html
<select class="browser-default" id="selectedService" name="jobtype">
<option id="zero" value="{{filler 'type'}}">{{filler 'type'}}</option>