I want to store all option texts from dropdown field. Application code is
<select id="regionSelect" onchange="setRegionalManagerInfo()" data-val="true" data-val-required="The Region field is required." name="RegionalInfo.RegionId" class="form-control input-validation-error">
<option selected="selected" value="" data-regionalmanageremail="" data-regionalmanagerphonenumber="" data-regionalmanagerphonenumberextension="">— Select —</option>
<option value="1" data-regionalmanageremail="user1#gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 1</option>
<option value="2" data-regionalmanageremail="user2#gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 2</option>
<option value="5" data-regionalmanageremail="user3#gmail.com" data-regionalmanagerphonenumber="">Region 3</option>
</select>
let array = []
cy.get('select option').each(($option, index )=> {
array.push(Cypress.$($option).text())
console.log(array[index]);
})
Is a bit simpler way to get the data. Right now this data is stored in the array, so you can access the content inside the each as well as outside.
This is more easily done with a combination of .then() and .map(),
cy.get('select option').then($options => {
return [...$options].map(option => option.innerText)
})
Related
I use reactive forms within my app. In a certain form I want to display a required (Validators.required) select like this:
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option *ngIf="!dformControl.value"
value="undefined">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
The problem is whether I use value="undefined" or value="" the form control still is set to valid because it got a value. Do not present the value attribute results in value="Choose ...".
Am I using select with reactive forms in a false way or how would I be able to make the option "Choose ..." being not valid??
Assigning initial value of select control to null will do the trick. Try below,
model_property = null
....
this.fb.group({
....
'control_key' : [this.model_property, Validators.required]
...
})
Check this Plunker!!, Look into app/reactive/hero-form-reactive.component.ts file.
I updated the Plunker to include below and it seems to be working,
<select id="power" class="form-control"
formControlName="power" required >
// see the value is set to empty,
<option value="">Choose...</option>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
Hope this helps!!
What I do is add a blank option and when that is selected since there is no value it is not valid.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option></option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
I have a simple search form_tag in a Rails 4 app.
One of the options is a select_tag:
<%= select_tag "plottable[plottable_id]", options_for_select(Plottable.all.map{ |plottable| [ plottable, plottable.id, { 'plottbale-type' => plottable.class } ] }), prompt: 'Select one option'%>
The HTML is generated properly, resulting in:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
When submitting the form the plottable-type does not get submitted. Here are the params:
Parameters: {"utf8"=>"✓", "from_time"=>"", "to_time"=>"", "plottable"=>{"plottable_id"=>"35"}, "commit"=>"Search"}
Thanks for your suggestions.
Just try this:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
<input type="hidden" name=plottable[type] value="", id="plottable_plottable_type">
$('#plottable_plottable_id').on('change', function(){
var type = $('option:selected', this).attr('plottable-type');
$('#plottable_plottable_type').val(type);
})
you can add hidden field tag by rails code as well
<%= hidden_field_tag "plottable[plottable_type]"%>
I am trying to use the 'track by' expression to track my selections by value, in an array of objects but, I'm unable to get it to work.
JS
var app = angular.module('cwsystem', []).controller('RegistrationCtrl', ['$scope', function($scope){
$scope.roles = [
{value: '110', position: 'Security Chief'},
{value: '111', position: 'Security Officer'}
];
}]);
HTML
<select name="userStatus" ng-model="user.userStatus" ng-options=" role.value as role.position for role in roles track by role.position" class="form-control input-sm" required>
<option value="">--Select Status--</option>
</select>
I want the browser to render the results like this:
<select name="userStatus" ng-model="user.userStatus" ng-options=" role.value as role.position for role in roles track by role.position" class="form-control input-sm" required>
<option value="">--Select Status--</option>
<option value="110">Security Chief</option>
<option value="111">Security Officer</option>
</select>
Can I get some assistance please on this problem?
ng-options does not accept "role.value as role.position for role in roles track by role.position" expression.
<select name="userStatus" ng-model="user.userStatus" ng-options=" role.value as role.position for role in roles" class="form-control input-sm" required>
<option value="">--Select Status--</option>
</select>
if you use above expression in ng-option you will get selected value in ng-model variable
I am trying to output four hidden inputs based upon the user's selection in a dropdown box.
<label>Neighborhood:</label>
<select id="district">
<option value="">- Select -</option>
<option value="warehouse">Warehouse District</option>
<option value="gateway">Gateway District</option>
<option value="tremont">Tremont</option>
<option value="shoreway">Detroit Shoreway</option>
</select>
For instance, if the user selects warehouse district, these hidden inputs are added to the form.
<input type="hidden" name="idx-q-LatitudeMax" value="41.50534740463771" />
<input type="hidden" name="idx-q-LatitudeMin" value="41.49729607499309" />
<input type="hidden" name="idx-q-LongitudeMin" value="-81.70605182647705" />
<input type="hidden" name="idx-q-LongitudeMax" value="-81.69352054595947" />
I've found some solutions to deal with changing a single value, but I need to output all four .
Any help would be greatly appreciated
"type property cannot be changed(IE Security Model)."
See this change type of input field with jQuery
Alternatively you can do this
Add a class to your input like this
<input class="hidden warhouse" name="idx-q-LatitudeMax" value="41.50534740463771"/>
<input class="hidden warhouse" name="idx-q-LatitudeMin" value="41.49729607499309" />
<input class="hidden warhouse" name="idx-q-LongitudeMin" value="-81.70605182647705" />
<input class="hidden warhouse" name="idx-q-LongitudeMax" value="-81.69352054595947" />
hidden css class has "display:none"
on change first hide all and then display the one you want
$('#district').change(function(){
$('input.hidden').hide()
if($(this).val() == "warehouse"){
$("input.warehouse").show()
}
})
Im a bit of a jQuery novice.
I have 5 options in a drop down menu.
I want to add a class in a div depending on which option is selected.
This class will then change the layout of the content using CSS.
Here is an example if it helps!
Thanks
<form>
<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>
<div class="3">styled content</div>
</form>
You can use the ".attr()" to set the class attribute of the div onchange.
You're best to change the option id to value first. then:
$("select").change(function() {
$("div").attr("class", $(this).val());
});
(EDIT) Change it to:
$("select#np_blog_layout").change(function() {
$("div#changebox").attr("class", $(this).val());
});
What 'rudeovski ze bear' said, but if you still want to set it to the div's class to the selected elements id, here it is.
$('select').change(function() {
$('div').attr('class', $(this).attr('id'));
});
First off, you don't have to use id to your options. Put the values in value attribute. Put ID to your div and select so you can select them using jQuery.
<form>
<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>
<div id="styledContent" class="3">styled content</div>
</form>
On JS
//Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);
//The event handler
function changeStyle()
{
//Set class to selected value
$('#styledContent').class($('#SelectElement').val());
}