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.
Related
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
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>
I have an AngularJS page for editing surgeries, but I can't get any of the <select>'s to show the current value. All the other fields in the form show their current values so I'm not sure what I'm doing wrong.
I have a factory set up with ngResource, this is in my controller.
// Supporting Data
SurgeryData.get({'accessToken':$rootScope.accessToken})
.$promise.then(function(response){
$scope.surgeryData = response.surgeryData;
});
// Surgery Data
SurgeryServices.get({'surgeryId':$stateParams.surgeryId,'accessToken':$rootScope.accessToken})
.$promise.then(function(response){
$scope.surgeryDetails = response;
$scope.formData.surgeryId = $scope.surgeryDetails.surgery.id;
...
$scope.formData.surgeryStatus = $scope.surgeryDetails.surgery_status;
...
$log.log( angular.toJson( $scope.formData.surgeryStatus ) );
$log.log( angular.toJson( $scope.surgeryData.surgery_status ) );
});
This is the HTML for Surgery Status
<select class="form-control" ng-model="formData.surgeryStatus" ng-options="status.name for status in surgeryData.surgery_status"></select>
and this is what I get in the console from my 2 $logs
$scope.formData.surgeryStatus
{"id":16,"name":"Ready For Pick-Up"}
$scope.surgeryData.surgery_status
[{"id":13,"name":"Inventory Not On Site"},{"id":14,"name":"Inventory On Site"},{"id":16,"name":"Ready For Pick-Up"},{"id":15,"name":"Sterilized For Surgery"}]
The <select>'s in the form have all the options but (for this example) Ready for Pick-Up is not selected and I have an empty ? option added to the select
<select class="form-control ng-pristine ng-valid" ng-model="formData.surgeryStatus" ng-options="status.name for status in surgeryData.surgery_status">
<option value="?"></option>
<option value="0">Inventory Not On Site</option>
<option value="1">Inventory On Site</option>
<option value="2">Ready For Pick-Up</option>
<option value="3">Sterilized For Surgery</option>
</select>
ng-init should be the way to go.
View:
<select class="form-control ng-pristine ng-valid" ng-init="formData.surgeryStatus = selected" ng-model="formData.surgeryStatus" ng-options="status.name for status in surgeryData.surgery_status track by status.id">
<option value="?"></option>
<option value="0">Inventory Not On Site</option>
<option value="1">Inventory On Site</option>
<option value="2">Ready For Pick-Up</option>
<option value="3">Sterilized For Surgery</option>
</select>
Viewmodel:
$scope.selected = $scope.surgeryDetails.surgery_id;
ng-init will find the matching value from your options and select it when loading. Be sure to set your ng-model equal to whatever value you want selected, which looks like your Id in this case?
I'm new at angular. I used to have a select box that was populated using ng:repeat:
<select ng-model="selectedAddress" ng-change="handleStoredAddressClick2()" id="address_dropdown">
<option value="-1" selected="selected">Add a new address</option>
<option ng:repeat="stored_address in address_dropdown" value="{{$index}}">{{stored_address.dropdown_display}}</option>
</select>
The HTML it generated looks like this:
<select id="address_dropdown" ng-change="handleStoredAddressClick2()" ng-model="selectedAddress" class="ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<option selected="selected" value="-1">Add a new address</option>
<option value="0" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding">602 BLOWING ROCK RD APT. 2 BOONE, NC 28607</option>
<option value="1" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding">TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
</select>
I have a function that runs on ng-click:
$scope.handleStoredAddressClick2 = function () {
var address = $scope.address_dropdown[$scope.selectedAddress];
$scope.streetaddr = address.address
$scope.search_near = address.zip;
var disp_addr = address.address;
if (address.address_two) {
disp_addr += ', ' + address.address_two;
}
if (typeof disp_addr != 'undefined' && disp_addr.toTitleCase) {
disp_addr = disp_addr.toTitleCase();
}
$scope.streetaddr = disp_addr;
$scope.stored_addr_key = address.key;
$scope.cityname = address.city;
$scope.statename = address.state;
$scope.fetch();
};
The second line of the function grabbed the {{$index}} value that was set in the ng:repeat value property. (So, 0 or 1 in this case.)
I was recently told that you shouldn't use ng:repeat to populate select boxes; that you should use ng-options instead. So I updated my select box to this:
<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in address_dropdown" id="address_dropdown">
<option value="-1" ng-selected="selected">Add a new address</option>
</select>
This is the HTML that generates:
<select id="address_dropdown" ng-options="a.dropdown_display for a in address_dropdown" ng-change="handleStoredAddressClick2()" ng-model="selectedAddress" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">602 BLOWING ROCK RD APT. 2 BOONE, NC 28607</option>
<option value="1">TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
</select>
It's essentially the same, especially the option values. But I now get an error on change, saying address is undefined. So for some reason, $scope.address_dropdown[$scope.selectedAddress]; no longer works to grab the selected index value of the dropdown on change, even though the actual index values are the same regardless of how the code is generated.
Can anyone explain why that is the case, and how I can get the selected index value of a select box populated with ng-options? Can I also get an answer as to why the text of the default selected option I set in the second set of code (repeated below) ends up displaying blank?
Code:
Add a new address
Rendered:
I'm not following this example completely, but it looks like you are trying to retrieve the address selected in the dropdown?
So you have this:
ng-options="a.dropdown_display for a in address_dropdown"
and this:
ng-model="selectedAddress"
Your dropdown is bound to the members of address_dropdown, so this code is unnecessary:
var address = $scope.address_dropdown[$scope.selectedAddress];
$scope.selectedAddress should already contain the complete address object that is a member of address_dropdown. No need to muck about with an index.
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