In my React app I have a select box with different options. Two of these options has the same value to post to the server:
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature</option>
<option value="humidity">Humidity</option>
<option value="temperature">Water temperature</option>
<option value="smoke">Smoke</option>
</select>
</div>
Problem 1: when I select a "Water temperature" option, I get a "Temperature" in an option field
Problem 2: how to make handleCategorySelect function working correctly? I mean, how to select "Water temperature" option with the same value as "Temperature" option and send it to the server?
handleCategorySelect:
handleCategorySelect = e => {
this.setState({ category: e.target.value })
}
Problem 3: I want to disable "Frequency" form field when user select a "Water temperature" option in Category, how to do that? Any "if" statement inside or something?
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature</option>
<option value="humidity">Humidity</option>
<option value="temperature">Water temperature</option>
<option value="smoke">Smoke</option>
</select>
</div>
<div className="form-group">
<label>Frequency</label>
<select className="form-control" onChange={this.handleFrequency} value={this.state.frequency}>
<option></option>
<option value="seconds">Seconds</option>
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
</select>
</div>
Both Temperature and Water Temperature has the same value "temperature"
<option value="temperature">Temperature</option>
<option value="temperature">Water temperature</option>
Change the Water Temperature value to something else
<option value="waterTemperature">Water temperature</option>
Related
How can I get input values to change dynamically when I select some element from select tag. I want in this input box to be shown a proper value when I change select option.
<select onchange="changevalue()" id="selectingg">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
You could use addEventListener on change event and get the value from the event.target dropdown like so:
document.getElementById("dropdownCategory").addEventListener('change', event => document.getElementById('categorySelected').value = event.target.value);
<select id="dropdownCategory">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
</select>
<input type="text" id="categorySelected"></input>
The below code is working fine for me you may try this code.
In below code I am assigning select value to input tag value.
function changevalue(){
document.getElementById("inputting").value =
document.getElementById("selecting").value;
}
<select onchange="changevalue()" id="selecting">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
I have a list where you can choose an option. I need to change default value to my own. Is it possible in Opencart?
<div class="form-group required" id="form1">
<label class="control-label" for="input-option227">Choose</label>
<select name="option[227]" id="frmdocumentsForm-r1" class="form-control" wtx-context="0128A83E-7CFB-40AA-836C-8D17569841BF">
<option value=""> --- Please choose an option --- </option>
<option value="17">AAAA</option>
<option value="18">BBB</option>
<option value="19">CCC</option>
<option value="44">DDD</option>
</select>
</div>
I need to change value "17" -> "AAA"
Thanks
change attribute value with loop . If you need replace only 1st value 17 check for if condition.
$( "select > option").each(function() {
$(this).attr('value',$(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""> --- Please choose an option --- </option>
<option value="17">AAAA</option>
<option value="18">BBB</option>
<option value="19">CCC</option>
<option value="44">DDD</option>
</select>
I have a select like this
<select name="category" >
<option value="0" selected>Select a Manufacturer</option>
<option value="10">Acer Technologies</option>
<option value="2">Alcatel</option>
<option value="14">Apple Iphone</option>
<option value="4">Azumi</option>
<option value="12">HTC Corporation</option>
<option value="8">Huawei</option>
<option value="5">LG Electronics</option>
<option value="11">Motorola</option>
<option value="9">Nokia Microsoft</option>
<option value="1">Samsung</option>
<option value="6">Sony Ericsson</option>
<option value="3">Zhong Xing ZTE</option>
</select>
And another select HIDDEN like this
<select name="manufacturer" >
<option value="none" selected>Select a Manufacturer</option>
<option value="Acer Technologies">Acer Technologies</option>
<option value="Alcatel">Alcatel</option>
<option value="Apple Iphone">Apple Iphone</option>
<option value="Azumi">Azumi</option>
<option value="HTC Corporation">HTC Corporation</option>
<option value="Huawei">Huawei</option>
<option value="LG Electronics">LG Electronics</option>
<option value="Motorola">Motorola</option>
<option value="Nokia Microsoft">Nokia Microsoft</option>
<option value="Samsung">Samsung</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Zhong Xing ZTE">Zhong Xing ZTE</option>
</select>
Both selects are almost the same value, the first one is to save the manufacturer as category and the second one is to save the manufacturers name
The first one is visible while the second one is hidden ( display:none )
What I need is:
If the user select in select one for example
<option value="2">Alcatel</option>
In some way the hidden display:none select must be autoselected to
<option value="Alcatel">Alcatel</option>
Any way to do this?
I already have Jquery running other functions on the site
Thanks
Use change function:
$( "select[name='category']" ).change(function(e) {
$( "select[name='manufacturer']" ).val( $(this).find( "option:selected" ).text() );
});
But if option text in category select do not match option value in manufacturer select - code will not work.
I am using label for attribute for input elements in my website that will help blind users. I have Combobox/Drop down in
my code to enter Date (Month/Day) format. Currently if there is only single drop down , for example Select Country, then on click on Label,
already selected country is reflecting as selected, that is okay. I have used this code of Jquery:
$(function () {
$('label').click(function () {
var id = $(this).attr('for');
$('#' + id).select();
});
});
But in Case of Date format as there are Child 'Label for' under Parent 'Label for' that is used for "ExpiryDate". So in this case
my upper written Jquery is not working.
That Jquery is working fine for Single Dropdown and for Teaxt boxes. But I want to select First child i.e. Month's already selected month should be
selected. Please assist me so that I can implement it. I want to handle that when user click over Label then TextBox, Single Dropdown and Combobox/Multiple related dropdown's already entered/selected items should
be shown as selected.
My HTML Code is here:
<div class="editor-label">
<label for="ExpiryDate">*Expiration Date</label>
</div>
<div class="editor-field">
<label class="accessibleText" for="ExpirationMonth">
<label for="ExpiryDate">*Expiration Date</label>
</label>
<select id="ExpirationMonth" name="ExpirationMonth" tabindex="0"><option value="">Month</option>
<option selected="selected" value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<label class="accessibleText" for="ExpirationDay">
<label for="ExpiryDate">*Expiration Date</label>
</label>
<select id="ExpirationDay" name="ExpirationDay" tabindex="0"><option value="">Day</option>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
I want to select only first child's already select items to shown as selected.
if you change your label for to point related select attribute like below for month and day it will select when you click label.
<label for="ExpirationMonth">*Expiration Date</label>
<select id="ExpirationMonth" name="ExpirationMonth" tabindex="0">
On the basis of selection of Issue type i want to show 2nd drop down. if someone is select Board i want to show 2nd drop down and if someone select Branding i want to show different option. pls help
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
In your select
<select name="issue_type" id="issue_type" onchange="change('issue_type');">
In your js file
$(document).ready(function(){
function change(id) {
//check condition if as
if ($('#' + id).val() == 'Board') {
//hide select except your required select
//like
$("#send_to").show().siblings().hide();
} else if () { // your next condition
//so on
}
}
});
here's jquery
$(document).ready(function(){
function changeVisibleSelect(elem){
var vis = $(elem).val() == 'Board';
$('#send_to' + (vis ? '_board' : '')).removeClass('hidden');
$('#send_to' + (vis ? '' : '_board')).addClass('hidden');
}
$('#issue_type').change(function(){
changeVisibleSelect(this);
});
changeVisibleSelect($('#issue_type'));
});
and minor edit to your html
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to_board">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
i changed the id of second select
css:
.hidden{display:none}
here's working jsfiddle: http://jsfiddle.net/MXjmY/1/