I am trying to use select2 in my lit element, but it is not finding the select2 functio and throws the error
"Uncaught (in promise) TypeError:
this.shadowRoot.getElementById(...).select2 is not a function"
I am following the code from here https://stackblitz.com/edit/litelement-how-to-implement-select2-in-litelement-e2twiq?file=index.js
My code:
import {LitElement, html} from 'lit';
class test extends LitElement {
render() {
return html`
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/js/select2.min.js"></script>
<style>
</style>
<div id="header-container">
<select id="select-state" placeholder="Pick a state...">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</select>
</div>
`;
}
constructor() {
super();
this.countrydata = [html`<option id="option" >arpit</option>`,
html`<option id="option">tandon</option>`,
html`<option disabled id="option" > shyam</option>`,
html`<option id="option">brian</option>`,
html`<option id="option">danielle</option>`,
html`<option id="option">howard</option>`];
}
connectedCallback() {
super.connectedCallback();
}
firstUpdated(){
this.shadowRoot.getElementById('select-state').select2();
//var test = this.shadowRoot.getElementById('sourcecountrycode');
//this.test.select2();
}
}
window.customElements.define("test", test);
Related
I have this code which is a React app :
import React, { Component } from 'react';
import Select from './components/Select/Select';
class App extends Component {
state = {
Type: [
{value: 'test 1', name: 'Test 1'},
{value: 'test 2', name: 'Test 2'},
{value: 'test 3', name: 'Test 3'},
],
};
render () {
return (
<>
<Select list={[...this.state.Type]}/>
<Select list={[...this.state.Type]}/>
<Select list={[...this.state.Type]}/>
</>
);
}
}
export default App;
Also I have the code for my component Select :
import React from "react";
const selectoption = ({ list }) => (
<select className="custom-select">{list.map(option => (<option key={option.value} value={option.value}>{option.name}</option>))}
</select>
);
export default selectoption;
I got this :
But I would like to have this :
I mean I want the 3 select wrap content.
Also,
I don't know how to do this but when I reduce the size I got this :
whereas I would like to have this :
Do you know how can I do this easily ?
Thank you very much !!!
NB : my code is there :https://codesandbox.io/s/nameless-wood-83cg3?file=/src/App.js
The window.innerWidth property gives the viewport width. If it is less than 500, the user is using a mobile phone. Using this information you can implement conditional styles that result in the page being responsive.
Just with CSS here. You only need to wrap these Selectcomponents with a div then styling it.
<div className="wrapper">
<Select list={[...this.state.Type]} />
<Select list={[...this.state.Type]} />
<Select list={[...this.state.Type]} />
</div>
In styles.css:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
width: 100%;
}
or another way you want
Don't forget to import the CSS file into the App component
import "./styles.css";
Bootstrap 4 has built-in classes that will produce your desired responsive behavior.
The HTML:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<body style="padding: 1rem">
<div class="container-fluid">
<div class="row">
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
</div>
</div>
</body>
The equivalent JSX would be:
<div className="container-fluid">
<div className="row">
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
</div>
</div>
Note that you also need to link the bootstrap css, in your index.html file (if you have one).
I'm trying to have any option within my select input to be set as a value in an object. I'm trying to use v-model for this purpose but I'm not exactly sure how. Below is what I've tried to do so far.
<div class="select-wrapper">
<select required name="category" id="category" #change="(e) => $emit('input', e.target.value)">
<option value="" selected="selected">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="other">Other</option>
</select>
</div>
Need a prop to bind the selected value and pass that prop to v-model. E.g.
<template>
<div>
<pre>category = {{ category }}</pre>
<select required name="category" id="category" v-model="category">
<option value="">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="nxp">NXP</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
category: null
};
}
};
</script>
Edit: plunker
You should add value prop to your component :
<div class="select-wrapper">
<select required name="category" id="category" #change="(e) => $emit('input', e.target.value)">
<option value="" selected="selected">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="other">Other</option>
</select>
</div>
<script>
export default {
props:value
};
</script>
and use it in parent component like :
<my-select v-model="category"/>
...
<script>
export default {
data() {
return {
category: ''
};
}
};
</script>
I'm trying to show the "expandrepeat" div when choosing a specific select option.
This is my not working code:
<script>
window.check=function(elem) {
if (elem.selectedIndex == 1) {
document.getElementById("expandrepeat").style.display = 'block';
} else {
document.getElementById("expandrepeat").style.display = 'none';
}
};
</script>
html:
<div class="information-lane">
<p class="information-title">{{trans.modal.repeat}}</p>
<select class="information-input form-control" onChange="check(this);">
<option value="-">No repeat</option>
<option value="-">Daily</option>
<option value="-">Weekly</option>
<option value="-">Monthly</option>
<option value="-">Yearly</option>
<option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option>
<option value="-">Custom...</option>
</select>
</div>
<div id="expandrepeat" style="display:none;">
<p>Repeat every</p>
<input>
</div>
If you're new to Vue, you should read the documentation on how to handle Event Handling.
You could also use v-show instead of setting the display property manually.
new Vue({
el: "#app",
methods: {
check: function(ev) {
if (ev.target.value === "custom")
document.getElementById("expandrepeat").style.display = 'block';
else
document.getElementById("expandrepeat").style.display = 'none';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="information-lane">
<select class="information-input form-control" #change="check">
<option value="-">No repeat</option>
<option value="">Daily</option>
<option value="-">Weekly</option>
<option value="-">Monthly</option>
<option value="-">Yearly</option>
<option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option>
<option value="custom">Custom...</option>
</select>
</div>
<div id="expandrepeat" style="display:none;">
<p>Repeat every</p>
<input>
</div>
I have two drop downs, when dropdown-1 is changed, selected option of dropdown-2 should be changed to the same as dropdown-1
Dropdown-1:
<div className="select-style-right joiner-select">
<select className="selectalljoiners" onChange={this.handleMainSelectChanged} value={this.state.selectedJoinerValue}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
Dropdown-2:
<div className="select-style-right joiner-select">
<select className={index} value={this.state.selectedJoinerValue}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
handleMainSelectChanged:
handleMainSelectChanged = (e) => {
thisclass.setState({
selectedJoinerValue: e.target.value
})
}
New to React, don't know how to achieve this. Please help out.
If one of dropdowns changed the second one will take same selected option.
https://jsfiddle.net/b1atetou/
class Example extends React.Component {
constructor() {
super();
this.state = { value: "" }
}
handleDropDownChage = (event) => {
this.setState({value: event.target.value});
}
render() {
return (
<div>
<div>
<select onChange={this.handleDropDownChage} value={this.state.value}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
<div>
<select onChange={this.handleDropDownChage} value={this.state.value}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
</div>
);
}
}
I have two <select> inputs. I want to set the attribute as "disable" one of them at a specific value option from the other <select>.
The first one is:
<select ref="selectOption">
<option selected value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
<select ref="selectTime" disabled={this.state.disabled}>
<option value="a" >January</option>
<option value="b" >Febreaury</option>
</select>
So, my idea is to set the state of the 2nd <select> as false when the option value = 2 from the first <select>
How can I do it? Or is there another way without react that I can do it? or with props? I'm pretty confused. I tried to do something like:
var option= ReactDom.findDOMNode(this.refs.selectOption).value;
if( option == '2' ) this.setState({disabled:true});
But it's not working. Tried to put it in componentDidUpdate but the component is not updating when I select a new value from the select, so that won't work. Ideas please.
EDIT:
I also have this solution with jquery but I want to use Reactjs.
$('#selectOption').change(function() {
$('#selectTime').prop('disabled', false);
if ($(this).val() == '2') {
$('#selectTime').prop('disabled', true);
}
})
I'm pretty confused on how to use ReactDom.findDOMNode(this.refs.selectOption) instead the jquery selectors
Here is a minimal example of how you could accomplish this, add an onChange event handler to your first select, setState in the event handler based on the value:
handleChange(event) {
let value = event.target.value;
this.setState({
disabled: value == '2'
});
}
render() {
return (
<div>
<select ref="selectOption" onChange={(e) => this.handleChange(e)}>
<option selected value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
<select ref="selectTime" disabled={this.state.disabled}>
<option value="a" >January</option>
<option value="b" >Febreaury</option>
</select>
</div>
)
}
That would be the react way to achieve this:
export default class Test extends Component{
constructor(props) {
super(props)
this.state = {
selectOptionValue: '1'
}
}
handleOnChange = (e) => {
this.setState({
selectOptionValue: e.target.value
})
}
render(){
return (
<div>
<select defaultValue = "1" onChange={this.handleOnChange}>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
<select disabled={ this.state.selectOptionValue === '2' }>
<option value="a" >January</option>
<option value="b" >Febreaury</option>
</select>
</div>
)
}
}
How about onChange event from this ? For your convenience:
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
If you want to keep it simple and use pure javascript, you could just use the following snippet.
document.querySelector('select[ref="selectOption"]').addEventListener('change', function(e) {
document.querySelector('select[ref="selectTime"]').disabled = (e.target.value === '2') ? true : false;
})
<select ref="selectOption">
<option selected value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select ref="selectTime">
<option value="a">January</option>
<option value="b">Febreaury</option>
</select>
Here's another approach to define which state variable needs to be set.
state = { someStateVariable : "" }
render() {
return (
<select onChange={event => this._setSelected({ someStateVariable: event.target.value })}>
<option value="1">One</option>
...
</select>
);
}
_setSelected = newState => {
this.setState(newState)
}
Step 1 - Create state and set initial value an empty string
const [category,setCategory] = useState('');
Step 2 Map youre options and check id in the option value === select value then set selected to true
const renderedResults = results.map((result) => {
const selected = category === result.id ? "true" : '';
return (
<option selected={selected} key={result._id} value={result._id}>{result?.name}</option>
);
});
Step 3
<select
onChange={(e) => {
setCategory(e.target.value);
}}
className="form-select"
aria-label={"Default select example"}
>
<option value="">Select a category</option>
{renderedResults}
</select>