I'm not sure if there's something wrong with my code or it's an existing bug with lit-html?
I'm trying to get value of the selected item when button is clicked.
number.js
<select class="form-control" name="number">
<option ?selected=${this.number === 1} value="1">One</option>
<option ?selected=${this.number === 2} value="2">Two</option>
<option ?selected=${this.number === 3} value="3">Three</option>
</select>
<button type="button" #click=${getSelectedValue}>Get Selected Value</button>
getSelectedValue() {
const selectOptions = this.querySelector('select[name="number"]');
const selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
}
I've tried selectOptions.value but I still can't get the selected value.
Note that, I've added createRenderRoot() {return this;} to disable the shadowDOM.
Related
I got stuck while creating a dependent drop down menu in react. I am trying to make a form in which user can select three options through the drop down menu respectively and based on the options selected the 4th field which is a disabled text field will be populated with the appropriate result.
This is my code.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">District</label>
<select className="form-select" value={selectedDistrict} onChange={handleDistrict} aria-label="Select District" >
<option value="Select District">Select District</option>
<option value={Data.data[0].DISTRICT}>{Data.data[0].DISTRICT}</option>
</select>
</div>
<div className="col-md-4">
<label htmlFor="inputPassword4" className="form-label">Assembly Constituency Number & Name.</label>
<select className="form-select" value={selectedConstituencyNameandNumber} onChange={handleConstituencyNameandNumber} aria-label="Select Assembly Constituency Number & Name." >
<option style={{"display": "block"}} value="Select Assembly Constituency Number & Name.">Select Assembly Constituency Number & Name.</option>
{selectedDistrict && acBooth.map((acBooth, index) => (
<option key={index} value={acBooth['AC No & Name']}>{acBooth['AC No & Name']}</option>
))}
</select>
</div>
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">Booth No.</label>
<select className="form-select" value={selectedBoothNumber} onChange={handleBoothNumber} aria-label="Select Booth No." >
<option value="Select Booth No.">Select Booth No.</option>
{selectedDistrict && partNumber.map((item, index) => (
<option key={index} value={item["Part No"]}>{item["Part No"]}</option>
))}
</select>
</div>
This is the code for 3 drop down menu. I want to execute a function which takes two parameter from the selected options in drop down menu and then display the output in the blank text field whose code is given below.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">Booth Name</label>
<input type="text" disabled className="form-control" value={boothName} onChange={()=>{
const newName = getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber);
setBoothName(newName);
console.log(newName);
}} id="inputUID" />
</div>
These are the function which I have written. It is working properly in the backend but I am unable to get the output in frontend.
const getBoothName = (acNo, partNo) => {
const boothName = Data.data.filter((item) => {
return item["AC No & Name"] === acNo && item["Part No"] === partNo
})
return boothName[0]["Part Name English"]
}
const [selectedDistrict, setSelectedDistrict] = useState('');
const [selectedConstituencyNameandNumber, setSelectedConstituencyNameandNumber] = useState('');
const [selectedBoothNumber, setSelectedBoothNumber] = useState('');
const handleDistrict = (e) => {
setSelectedDistrict(e.target.value);
}
const handleConstituencyNameandNumber = (e) => {
setSelectedConstituencyNameandNumber(e.target.value);
}
const handleBoothNumber = (e) => {
setSelectedBoothNumber(e.target.value);
}
A help is really appreciated.
The onChange function of your Input Textfield should be on the 3rd Select field. After that on change of your third dropdown it will setBoothName(newName) and your value will be set in the input textfield.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">
Booth No.
</label>
<select
className="form-select"
value={selectedBoothNumber}
onChange={handleBoothNumber}
aria-label="Select Booth No."
>
<option value="Select Booth No.">Select Booth No.</option>
{selectedDistrict &&
partNumber.map((item, index) => (
<option key={index} value={item["Part No"]}>
{item["Part No"]}
</option>
))}
</select>
</div>
Change handleBoothNumber function in your code like this
const handleBoothNumber = (e) => {
setSelectedBoothNumber(e.target.value);
setBoothName(getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber));
}
When I select an option, I want to remove selected attribute from old one and add it to option I selected.
HTML Code:
<label>Gender</label>
<select id="gender" name="gender" class="form-control" onchange="redirect()">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="any">Any</option>
</select>
JS Code:
<script>
$("#gender").on("change", function redirect() {
// const queryStr = "gender=any&platform=any"
// const usp = new URLSearchParams(queryStr)
// console.log(usp)
url = window.location.href.split("?")[0] + "?gender=" + this.value + "&platform=<%=platform%>"
location.replace(url)
})
</script>
I'm facing the following challenge building some dropdowns with Handlebars.
Instead of modeling the dropdown's select this way:
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
<option {{selectedSport sport 'all'}} value="all">All</option>
<option {{selectedSport sport 'Hiking'}} value="Hiking">Hiking</option>
<option {{selectedSport sport 'Mountaineering'}} value="Mountaineering">Mountaineering</option>
<option {{selectedSport sport 'Climbing'}} value="Climbing">Climbing</option>
<option {{selectedSport sport 'Mountain biking'}} value="Mountain biking">Mountain biking</option>
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
<option {{selectedDifficulty difficulty 'all'}} value="all">All</option>
<option {{selectedDifficulty difficulty 'Easy'}} value="Easy">Easy</option>
<option {{selectedDifficulty difficulty 'Medium'}} value="Medium">Medium</option>
<option {{selectedDifficulty difficulty 'Hard'}} value="Hard">Hard</option>
<option {{selectedDifficulty difficulty 'Expert'}} value="Expert">Expert</option>
</select>
<label for="floatingSelect">Difficulty</label>
</div>
I would like to use the same helper for both of them, but I still don't know how to do it. (btw, ignore the fact that I should be using an {{#each}} for displaying the options :P)
The controller:
module.exports.list = (req, res, next) => {
const filters = req.query;
const { location, sport, difficulty } = req.query;
const criterial = Object.keys(filters)
.filter((key => filters[key] !== 'all'))
.reduce((criterial, filter) => {
if (filters[filter]) criterial[filter] = filters[filter];
return criterial;
}, {});
Route.find(criterial)
.then(routes => {
res.render('routes/list', { routes, location, sport, difficulty })
})
.catch(next)
}
The helpers:
hbs.registerHelper('selectedSport', (option, sportValue) => {
return option === sportValue ? ' selected' : '';
})
hbs.registerHelper('selectedDifficulty', (option, difficultyValue) => {
return option === difficultyValue ? ' selected' : '';
})
Many thanks for your help! :)
Finally I solved it this way:
Instead of typing all the options directly on the HBS, I create these with a helper that renders each option.
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
{{#each sportOptions as |sportOption|}}
{{option ../sport sportOption}}
{{/each}}
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
{{#each difficultyOptions as |difficultyOption|}}
{{option ../difficulty difficultyOption}}
{{/each}}
</select>
<label for="floatingSelect">Difficulty</label>
</div>
The helper receives 2 parameters: sport and sportOption and according to their value, returns a string cointaining the option with the selected attribute or not.
hbs.registerHelper('option', function (selectedValue, value) {
const selectedProperty = value == selectedValue ? 'selected' : '';
return new hbs.SafeString(`<option value=${value} ${selectedProperty}>${value}</option>`);
});
sportOption and difficultyOption are arrays with all the possibilities inside them.
I hope that, if someone else has the same problem, this can be of any help :)
I have a user update form that I'm working on. The user can pick an option from a select menu, and that option gets saved to the db as a string.
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral">Neutral</option>
<option value="Evil">Evil</option>
</select>
When the user picks an option, I'm able to post to the database. When I reload the page, I'd like to get the chosen value and use it to add a selected attribute to the corresponding option. So if a person picks Neutral and saves it, I'd like to show...
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral" selected >Neutral</option>
<option value="Evil">Evil</option>
</select>
you have to pass value morality to view when rendering page :
router.get('/edit/:id', function(req, res) {
Model.findOne({_id:req.params.id},function(err,data){
if(!err && data){
res.render('home',{morality:data.morality});
// or you can pass whole data object to view
//res.render('home',{data:data});
// inside view {{data.morality}}
}
});
});
and in view add condition like this :
<select name="morality" id="morality">
<option value="" {{morality==''?'selected':''}}>Choose down below!</option>
<option value="Good" {{morality=='Good'?'selected':''}}> Good</option>
<option value="Neutral" {{morality=='Neutral'?'selected':''}}>Neutral</option>
<option value="Evil" {{morality=='Evil'?'selected':''}}>Evil</option>
</select>
I have an parent SiliComponent and child SiliChildComponent.
Within SiliChildComponent I have an #Input() expdays:any[];
This is added within ngOnChanges interfaces like this:
Angular4 SiliChildComponent
data:any;
#Input() expdays:any[];
ngOnChanges() {
this.data = this.expdays;
}
**HTML from parent component SiliComponent **
<select (ngModelChange)="changeCar($event)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
<expdays [expdays]='exp_searchData'></expdays>
HTML from child component SiliChildComponent where I am using the #Input data
<div *ngFor="let x of data" >
{{x}}
</div>
Fixed problem:
The issue was in another place of my code.