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.
Related
I have this code in a livewire view which contains a form. This is a simple select field in which you are supposed to select a document type from a list.
<div>
<label for="documenttype" class="form-label"><strong>Document type</strong></label>
<select wire:model="documenttype_id" class="form-control" id="documenttype" aria-describedby="documenttypeHelp">
<option selected>{{ __( 'Choose' ) }}</option>
#foreach( $documenttypes as $documenttype )
<option value="{{ $documenttype->id }}" #if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected #endif>
{{ $documenttype->name }}
</option>
#endforeach
</select>
</div>
The thing is that I want it to have preselected the correct value when editing a client. But for some reason when I add this code: #if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected #endif in the options loop, the form starts behaving strangely.
Everytime the person filling the form selects an option the content becomes blank.
This is situation 1 (before selecting an option):
And this is situation 2 (after selecting the option):
I have no idea why this happens, can someone guide me on how to solve this issue?
add wire:ignore.self to root select's div. Using this modifier, you instruct Livewire don´t update the element itself but allows modification to its children.
The quick way to fix this would be to assign the selected value from your component mount method.
public function mount() {
$this->documenttype_id = $client->documenttype_id
//$client->documenttype_id being the previously selected value from your db
}
this will automatically select your option, you don't need the if statement on your option tag.
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.
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>
My question is similar to this one: CSS to select another Element based on a HTML Select Option Value
Here's my HTML:
<select id="select-card">
<option value=""></option>
<option value="card">**** **** **** 1982</>
</select>
<p>Or enter a new one...</p>
I want to hide the <p> when the user selects a card from the list, and show it when the user selects the empty option.
Is this possible in pure CSS, or do I need to use JavaScript?
Use the required attribute:
<select id="select-card" required>
And write rules for valid and invalid for the element, selecting the following p-element:
#select-card:invalid + p { display: block; }
#select-card:valid + p { display: none; }
Fiddle
I'm having a dropdown list in my web page. And it contains two lists. 1. Yes 2.No. If we select yes then the desired text box and label will visible, else it won't be visible. So how to do this?
You can use javascript to do this. Something like
<script type="text/javascript">
function ChangeSel(val)
{
var tYes = document.getElementById("txtYes");
if ( val === "1" )
{
tYes.style.display = "inline";
}
else
{
tYes.style.display = "none";
}
}
</script>
<select id="sel1" onchange="ChangeSel(this.value);">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<input type="text" id="txtYes" value="" />
See a working demo.
You can do this using a post to the server side. Note that they use a button to hide the dropdown instead of the other way around, but the concept is the same.
Or you can do this using javascript. Basically you add a javascript function the the ASP:DropDownList's OnChange event.
Also see the tutorials at The official ASP.Net Tutorial Site.