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>
);
}
}
Related
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>
The sample form I created contains only 3 <select> items because I'm practicing form validation with the birthdate of the user. If even one of the 3 <select> items has no value, the form is supposed to preventDefault(); otherwise it would return true.
HTML
<form action="" method="post">
<select name="month" id="month">
<option value="">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
</select>
<select name="day" id="day">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="year" id="year">
<option value="">Year</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
</select>
<input type="submit" value="Submit">
</form>
In my javascript file, I had two options but both failed to execute successfully.
Option 1
function validate(e) {
var selectItems = document.querySelectorAll('select');
selectItems.forEach(function(item) {
if(!item.value) {
e.preventDefault();
} else {
return true;
}
})
}
document.querySelector('form').addEventListener('submit', validate);
Option 2
function validate(e) {
var month = document.querySelector('#month');
var day = document.querySelector('#day');
var year = document.querySelector('#year');
if(!month.value && !day.value && !year.value) {
e.preventDefault();
} else {
return true;
}
}
document.querySelector('form').addEventListener('submit', validate);
In option 1, the problem I had was, though the three items are already complete, the form still doesn't return true.
In option 2, if one of the three items already has a value while the other two have no value and you submit the form, it returns true.
How should I make this correct?
This should work:
function validate(e) {
var selectItems = Array.from(document.querySelectorAll('select'));
if (selectItems.some(item => !item.value)) {
e.preventDefault();
} else {
return true;
}
}
document.querySelector('form').addEventListener('submit', validate);
<form action="" method="post">
<select name="month" id="month">
<option value="">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
</select>
<select name="day" id="day">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="year" id="year">
<option value="">Year</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
<input type="submit" value="Submit">
</form>
Filling every inputs of a working hours form can be quite tedious.
Is there a way to populate every inputs from a form with the first entered value?
In the case of this Fiddle https://jsfiddle.net/az8ujh1e/1/, a first input on any of the opend date would populate the other ones (that could still be modified one by one)
and a first input on the closed dates would do the same on all the closing dates.
Code:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-6">Opend</div>
<div class="col-sm-6">Closed</div>
<form role="form" action="#" method="POST">
<div class="col-sm-6" id="timeopen1">
<select name="timeopen1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed1">
<select name="timeclosed1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen2">
<select name="timeopen2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed2">
<select name="timeclosed2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen3">
<select name="timeopen3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed3">
<select name="timeclosed3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen4">
<select name="timeopen4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed4">
<select name="timeclosed4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6"><br>
<button type="submit" class="btn btn-default" name="submit_time" >Submit</button>
</div>
</form>
I think the other answers are missing the point that he values should only be set automatically if the other values have not yet been set.
Add "timeopen" and "timeclosed" classes to your selectors like this:
<select name="timeopen1" class='selectpicker timeopen'>
Then the following script will change the other three values only if they are still set to "00:00".
$(function() {
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen")) {
autoSet(".timeopen", this);
} else {
autoSet(".timeclosed", this);
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});
This may cause a problem if three of them need to be set to "00:00", as it will then change the fourth one to "00:00" as well. So instead of checking the values, you may want to use global variables so that the autoSet only runs once for .timeopen and once for .timeclosed.
$(function() {
var autoSetTimeopen = true;
var autoSetTimeclosed = true;
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen") && autoSetTimeopen) {
autoSet(".timeopen", this);
autoSetTimeopen = false;
} else if ($(this).hasClass("timeclosed") && autoSetTimeclosed) {
autoSet(".timeclosed", this);
autoSetTimeclosed = false;
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});
If I correctly understood you want to display the value you selected in one field in all other fields from the same type. If so you just need to add a class "open" or "closed" to your select inputs and then proceed like this :
$('select').on('change', function() {
var value = $(this).val();
var className = 'open';
if( $(this).hasClass('closed') ) {
className = 'closed';
}
$('select.' + className).val(value);
});
Here is your Fiddle updated:
https://jsfiddle.net/az8ujh1e/2/
Here is a code which would do what you want, but it is not fully optimized right now. What I would do is, add ids to the select tags, so you can easily work with them with javascript or jquery.
$('#timeopen1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeopen'+i.toString()+' select').val(opt);
}
});
$('#timeclosed1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeclosed'+i.toString()+' select').val(opt);
}
});
EDIT:
Just as someone mentioned in another answer, add classes timeopen and timeclosed to your select elements, so we can easily work with them. Here is the updated code, to set all elements just the first time.
$('.selectpicker').one('change',function(event){
var opt = $(this).val()
if($(this).hasClass('timeopen'))
{
$('.timeopen').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
else
{
$('.timeclosed').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
});
https://jsfiddle.net/az8ujh1e/13/
I've got some example code, what I want is when the value in the second select list is set to 0 the first one also resets to 0, at the moment they reset each other when a value is selected in one. Any help appreciated thanks:
HTML:
<select name="Standard" id="std" size="6" onClick="selectCheck(this,'del'); return true;">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option>
</select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
JS:
function selectCheck(me,other) {
var ind = me.selectedIndex;
if (ind > 0) {
document.getElementById(other).selectedIndex = 0;
}
}
Look for the specific ID
if (ind > 0 && other !='del') {
document.getElementById(other).selectedIndex = 0;
}
DEMO
<select name="Standard" id="std" size="6">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option> </select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
<script>
function selectCheck(me,other) { var ind = me.selectedIndex; if (ind<1) { document.getElementById(other).selectedIndex = 0; } }
</script>
I have two select boxes:
<select name="county" id="countyselect">
<option value="Dixie">Dixie</option>
<option value="Hernando">Hernando</option>
<option value="Holmes">Holmes</option>
<option value="Jackson">Jackson</option>
<option value="Liberty">Liberty</option>
<option value="Putnam">Putnam</option>
</select>
<select name="site" id="siteselect">
<option value="Florahome">Florahome</option>
<option value="Green Swamp">Green Swamp</option>
<option value="NE Jackson County">NE Jackson County</option>
<option value="N Holmes County">N Holmes County</option>
<option value="S Liberty County">S Liberty County</option>
<option value="Suwannee">Suwannee</option>
</select>
When one box is changed, the other needs to change to the corresponding index (i.e. if Dixie is selected in "county", Florahome should be selected in "site"). My attempt using jQuery is below but does not seem to work.
$('select#countyselect').change(function() {
var countySelector = $('select#countyselect').attr("selectedIndex");
$('select#siteselect').attr('selectedIndex', countySelector);
});
$('select#siteselect').change(function() {
var siteSelector = $('select#siteselect').attr("selectedIndex");
$('select#countyselect').attr('selectedIndex', siteSelector);
});
Any ideas?
You want prop, not attr. Something like:
function matchUp(selected, toselect)
{
var idx = selected.prop('selectedIndex');
toselect.prop('selectedIndex', idx);
}
$('#countyselect').change(
function() {
matchUp($('#countyselect'), $('#siteselect'));
}
);
$('#siteselect').change(
function() {
matchUp($('#siteselect'), $('#countyselect'));
}
);
function matchUp(selected, toselect)
{
const idx = selected.prop('selectedIndex');
toselect.prop('selectedIndex', idx);
}
$('#countyselect').change(
function() {
matchUp($('#countyselect'), $('#siteselect'));
}
);
$('#siteselect').change(
function() {
matchUp($('#siteselect'), $('#countyselect'));
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="county" id="countyselect">
<option value="Dixie">Dixie</option>
<option value="Hernando">Hernando</option>
<option value="Holmes">Holmes</option>
<option value="Jackson">Jackson</option>
<option value="Liberty">Liberty</option>
<option value="Putnam">Putnam</option>
</select>
<select name="site" id="siteselect">
<option value="Florahome">Florahome</option>
<option value="Green Swamp">Green Swamp</option>
<option value="NE Jackson County">NE Jackson County</option>
<option value="N Holmes County">N Holmes County</option>
<option value="S Liberty County">S Liberty County</option>
<option value="Suwannee">Suwannee</option>
</select>