I have an question about how to show text field based on choose combobox.
I have an code like this :
<select name="comment">
<option value="">Choose One</option>
<option value="Good">Good</option>
<option value="Others">Others</option>
</select>
If I choose others, then I want text input show.
How can I do that ? Is that can be done without jquery ?
Using Plain JavaScript, try this
HTML Portion
<select name="comment" id="combo" onChange="check();">
<option value="">Choose One</option>
<option value="Good">Good</option>
<option value="Others">Others</option>
</select>
<input type = "text" id ="dummyText" visible="false" style="visibility:hidden"/>
Javascript Portion
function check() {
var el = document.getElementById("combo");
var str = el.options[el.selectedIndex].text;
if(str == "Others") {
show();
}else {
hide();
}
}
function hide(){
document.getElementById('dummyText').style.visibility='hidden';
}
function show(){
document.getElementById('dummyText').style.visibility='visible';
}
Check JSFIDDLE
Related
I have two dynamic select fields. The first choice field is loaded from a list and dependant on what you select it then populates the second select field.
I'm have a problem where I want to hide the second select field if it doesn't have any option in it but nothing seems to work
I've tried ng-if="caseDetails.Subcategory1.length === 0" (this just hides the control and doesn't show anything if there is options) and ng-if="caseDetails.Subcategory1.length < 1"
Primary select field code code
<select class="form-control ng-pristine ng-valid ng-empty ng-touched"
id="exampleFormControlSelect8"
ng-options="caseType for caseType in caseTypes"
ng-model="caseDetails.Casetype"
ng-change="onCaseTypeChanged()">
<option value="?" selected="selected"></option>
<option label="option1" value="string:option1">option1</option>
<option label="option2" value="string:option2">option2</option>
<option label="option3" value="string:option3">option3</option>
<option label="option4" value="string:option4">option4</option>
</select>
Below is the code where it has no options but loads a blank option anyway.
<select ng-options="subCategory for subCategory in getPrimaryCategories()"
ng-model="caseDetails.Subcategory1"
ng-change="onPrimaryCategoryChanged()">
<option value="?" selected="selected"></option>
</select>
Below is the code where it has options
<select ng-options="subCategory for subCategory in getPrimaryCategories()"
ng-model="caseDetails.Subcategory1"
ng-change="onPrimaryCategoryChanged()">
<option value="?" selected="selected"></option>
<option label="option1" value="string:option1">option1</option>
<option label="option2" value="string:option2">option2</option>
<option label="option3" value="string:option3">option3</option>
<option label="option4" value="string:option4">option4</option>
</select>
$scope.getPrimaryCategories = function(){
var matches = [];
var mappings = $scope.caseTypeMappings;
for(var i = 0; i < mappings.length; i++){
var mapping = mappings[i];
if(mapping.Casetype == $scope.caseDetails.Casetype && mapping.Subcategory1 != null) {
for(var j = 0; j < mapping.Subcategory1.length; j++){
if(mapping.Subcategory1[j] && matches.indexOf(mapping.Subcategory1[j]) < 0) {
matches.push(mapping.Subcategory1[j]);
}
}
}
}
return matches;
}
Save the results of the getPrimaryCategories() function and use its length to show the control:
<select ng-options="subcat for subcat in (subcatArr = getPrimaryCategories())"
ng-show="subcatArr.length"
ng-model="caseDetails.Subcategory1"
ng-change="onPrimaryCategoryChanged()">
</select>
I have two dropdown menus in an Angular form. One is country and the other is country dialing code. When the user selects USA on the first dropdown, I want to update the second dropdown to default to +1 for the dialing code. Otherwise, the second dropdown should deafult to the placeholder "Select Country Code". I have successfully done this using javascript, but Angular still considers the form to be invalid when submitted. I've tried forcing the field to become valid in the javascript, but it doesn't seem to work. Is there a way to do this using javascript or an ng command in the HTML? I would like to keep the html formatted as is (i.e. with the select and options tags).
HTML:
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="country" name="country" type="text"
ng-model="contactSession.country">
<option data-countryCode="UG" value="256">Uganda</option>
<option data-countryCode="UA" value="380">Ukraine</option>
<option data-countryCode="AE" value="971">United Arab Emirates</option>
<option data-countryCode="GB" value="44">United Kingdom</option>
<option data-countryCode="US" value="1">United States</option>
<option data-countryCode="UY" value="598">Uruguay</option>
<option data-countryCode="UZ" value="998">Uzbekistan</option>
</select>
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="countryCode" name="countryCode" type="text"
ng-init="contactSession.countryCode = '1'"
ng-model="contactSession.countryCode">
<option value="" selected="selected">Select Country Code</option>
<option data-countryCode="UA" value="380">Ukraine (+380)</option>
<option data-countryCode="AE" value="971">United Arab Emirates(+971)</option>
<option data-countryCode="GB" value="44">United Kingdom (+44)</option>
<option data-countryCode="US" id="usaSelection" value="1">United States (+1)</option>
<option data-countryCode="UY" value="598">Uruguay (+598)</option>
</select>
JS:
$('select[name=country]').change(function () {
if ($(this).val() == '1') {
document.getElementById("countryCode").value = document.getElementById("usaSelection").value;
} else {
document.getElementById("countryCode").value = "";
}
});
I've made a fiddle, but I am not sure whether this is same as your intent or not.
Change select box
<select ng-options="country.code as country.nameAndCode for country in countries"
ng-model="selectedCountryAndCode"
ng-change="changeCountryAndCode();"
required>
<option value="">Select Country Code</option>
</select>
If you use 'ng-options', it'll make code more simple.
.
.
UPDATE
Here's updated fiddle.
A little modified following as I've understood.
.
.
.
Latest UPDATE
Here's another updated fiddle
I want to get the text of the element.
This is the dropdown box in disable mode:
<select disabled="" readonly="readonly" onchange="onChange('incident.priority');" style="; " id="incident.priority" class="form-control readonly disabled" ng-non-bindable="true" name="incident.priority">
<option value="">-- None --</option>
<option value="1">1 - Critical</option>
<option value="2">2 - High</option>
<option value="3">3 - Moderate</option>
<option value="4">4 - Low</option>
<option value="5">5 - Planning</option>
</select>
I am using:
JavascriptExecutor jse = (JavascriptExecutor)driver;
WebElement element = driver.findElement(By.xpath("//select[#id='incident.priority']"));
String s = (String) jse.executeScript("return arguments[0].text" + "", element);
System.out.println("Priorityvalue= " + s);
The output is null. I want to get that disable element text.
Hmm well I am not sure how the disabled attribute will affect this but when working with dropdown boxes user the SelectElement class.
IWebElement element = driver.FindElement(By.CssSelector("select[id='incident.priority']"));
SelectElement elementDdl = new SelectElement(element);
var text = elementDdl.SelectedOpiton.Text;
Now this is C# code but the methods and classes should all be named similarly.
First two lines are from js file where value is fetching through id.
var activity = document.getElementById("bactivity").value;
var activity1 = activity.options[activity.selectedIndex].value;
<select style="font-size:15px" ng-model="activity" value="Enter activity" id="bactivity">
<option selected>select</option>
<option value="Fitness">Fitness</option>
<option value="Aerobics">Aerobics</option>
<option value="Dance">Dance</option>
<option value="Martial arts">Martial arts</option>
<option value="Boxing">Boxing</option>
<option value="Athletics">Athletics</option>
</select>
the above code is from html file where I am displaying data in form of dropdown and when I am selecting any value it generate error that option is invalid. Some tell what was my mistake there so I can make it correct.
Herre you can find the working code, you just had to take the elements not their value (first 2 lines of code):
var activity = document.getElementById("bactivity");
var activity1 = activity.options[activity.selectedIndex];
<select style="font-size:15px" ng-model="activity" value="Enter activity" id="bactivity">
<option selected>select</option>
<option value="Fitness">Fitness</option>
<option value="Aerobics">Aerobics</option>
<option value="Dance">Dance</option>
<option value="Martial arts">Martial arts</option>
<option value="Boxing">Boxing</option>
<option value="Athletics">Athletics</option>
</select>
<div class="field-wrap">
<select name=courses class="input-field1" name="state" title="state" ng-model="signup.state" >
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Tripura">Tripura</option>
<option value="Uttaranchal">Uttaranchal</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>
</select>
</div>
this is the select menu i am using i want to fetch the selected value in my controller but don't know how to do that, I already fetched the value for textbox but have no idea about the select box.
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
var data = {
firstname : $scope.signup_form.firstname.$modelValue,
lastname : $scope.signup_form.lastname.$modelValue,
email : $scope.signup_form.email.$modelValue,
mobileNumber : $scope.signup_form.mobileNumber.$modelValue,
district : $scope.signup_form.district.$modelValue,
state : $scope.signup_form.state.$modelValue,
course : $scope.signup_form.course.$modelValue,
collegeName : $scope.signup_form.collegeName.$modelValue,
};
This is my controller, I think I have to use ng-option but not sure.
Thanks
In your case $scope.signup.state will have value of selected state.
The value of selected option is saved into model assigned to dropdown
I'd suggest adding an array of options in your Controller instead of hardcoding it in the HTML and then use the ng-options directive to display the options from that array, you'd end up with something like:
<select name=courses class="input-field1" name="state" title="state" ng-model="signup.state" ng-options="option in options">
(where options is an array of options declared inside your controller
$scope.options = ['option1', 'option2'];
Then you can simply bind that input to an ng-model and use it regularly from the controller
$scope.signup.state
will give you access to whatever option is selected
You can use ng-change here. When ever an option is selected from the drop down then this method will be fired and we can persist the selected option data.
html
<div>
<select ng-model="selState" ng-change="selectedState(selState)"
data-ng-options="state as state.name for state in states">
<option value="">Select Account</option>
</select>
{{selectedState}}
</div>
script.js
myApp.controller('Ctrl', function($scope) {
$scope.states=[
{name:"AP"},
{name:"Karnataka"},
{name:"Tamilnadu"}
];
$scope.selectedState = function(item) {
alert(item.name);
};
Working Plunker