I have a test that required from me to select option, sound easy yes? so not in ie.
I'm building tests in protractor with
SELENIUM_PROMISE_MANAGER: false,
the code in the HTML
<div class="ims-col-14 text-center has-padding-top-3 has-padding-left-4 has-padding-right-4 has-border-left" style="height: 34px;">
<select class="ng-valid ng-not-empty ng-touched ng-dirty ng-valid-parse" data-ng-disabled="vm.disableDocument(document)" ng-change="vmDoc.status_OnChange(document,'BYPASS')" ng-model="document.status" ng-options="opt.key as opt.value for opt in vm.documentStatuses[document.documentType.type]">
<option selected="selected" value="string:MISSING"></option>
<option value="string:BYPASS" label="2">2</option>
<option value="string:RECEIVED_MANUALLY" label="3">3</option>
<option value="string:NOT_REQUIRED" label="4">4</option>
</select>
</div>
I want to select the option with BYPASS but non that the solution I found solve me issue
their is 4 select in the document
select_doc:ElementArrayFinder = element.all(By.css("imscore-process-documents select.ng-pristine"));
I came close to solve the issue with robot action , but after the open the select the option not been selected
await browser.actions().mouseMove(this.select_doc.get(0)).perform();
await browser.sleep(1000);
await browser.actions().click().perform();
await browser.sleep(1000);
await browser.actions().mouseMove({x: 10, y: 20}).perform();
await browser.sleep(1000);
await browser.actions().click().perform();
await browser.sleep(2000);
Try writing a function that selects the dropdown using the option number. Something like this:
let selectbyNum = async function ( element, num ) {
if (num){
let options = await $$(by.tagName('option'));
await options[num].click();
}
};
This should allow you to select the element according to the number.
If this doesn't work, you can do something like this:
await element(by.css("div.ims-col-14 option [value='string:BYPASS']")).click();
I also don't see a ng-pristine class so I wonder how you are selecting all elements from element.all(By.css("imscore-process-documents select.ng-pristine"));
One of the two should work. Give it a shot!!
Related
I am trying to reset options value when clicked on button. I was unable to find any solution. I have a component where I am using this code:
<select class='select-option' required [(ngModel)]='optionSelected' (ngModelChange)="toNumber()">
<option [ngValue]="undefined" disabled selected> Please select one option </option>
<option *ngFor='let option of options' [ngValue]="option">{{option}}</option>
</select>
Inside my class I am using this code:
options = ["Bar", "Pie", "Area"];
To call options inside a loop. I am using this code on button event:
appendToContainer(){
// logic
this.options == null
}
What should I do to make it default or null
Your logic is correct, but implementation is wrong:
appendToContainer(){
// logic
this.options == null; // ==> WRONG expression
this.options = []; // ==> CORRECT
}
Try this:
appendToContainer(){
// logic
this.options.value == this.options.options.first;//if the first options is 'Select'
}
I want to create setting page in my ionic app
HTML :
<select class="selectCountry">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
Controler.js
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
});
you can put ng-model on the select and trigger onchange function
<select class="selectCountry" ng-model="selectCountry" ng-change="save()">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
and in the controller
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
$scope.save = function(){
$localStorage.selectCountry= $scope.selectCountry; // set
alert($localStorage.selectCountry); // get
}
$localStorage.selectCountry = $localStorage.selectCountry; // get
});
Check the docs for it NgStorage
i created this pen Here
.service('storage', function() {
var myjsonObj = "nothing";//the object to hold our data
return {
setJson:function(name, item){
window.localStorage.setItem( name, item );
},
getJson:function(name){
return window.localStorage.getItem( name );
}
}
})
if you wanna store and retrieve the variable.
storage.setJson("nameOfSetting", "theVariableYouWannaStore");
var theVariableYouStored = storage.getJson("nameOfSetting");
I use easydropdown.js to style the HTML select.
The problem is that populating dynamically select via $.post jquery, the script does not work.
You know how to help me? Thanks.
We can get select object, modify its value, and then destroy and re-init as code below:
<select id="select-to-easydropdown" class="dropdown">
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
/* in js code with jquery */
var select = $("#select-to-easydropdown");
// process with select object (add/remove option)
select.append('<option value="option3">option 3</option>');
// destroy if existing easydropdown object
select.easyDropDown('destroy');
// init or re-init easydropdown
select.easyDropDown({
onChange: function(selected){
// add change event listener
...
}
});
Hope it helps!
var choose = '<option value="0">choose...</option>';
var wait = '<option value="0">wait...</option>';
$("#select_2").html(choose);
$("#select_3").html(choose);
$("#select_1").change(function(){
var val_select_1 = $("#select_1 option:selected").attr('value');
$("#select_2").html(wait);
$("#select_2").attr("disabled", "disabled");
$("#select_3").html(choose);
$("#select_3").attr("disabled", "disabled");
$.post("select.php", {id_select_1:value_select_1}, function(data){
$("select#select_2").removeAttr("disabled");
$("select#select_2").html(data);
});
});
$("#select_2").change(function(){
$("#select_3").attr("disabled", "disabled");
$("#select_3").html(wait);
var val_select_2 = $("#select_2 option:selected").attr('value');
$.post("select.php", {id_select_2:value_select_2}, function(data){
$("#select_3").removeAttr("disabled");
$("#select_3").html(data);
});
});
and select style this https://github.com/patrickkunka/easydropdown
I need to create a reset button which on click will set all select lists in a form to index 0. I have tried this code for function, but it gives a syntax error on myForm.length;
<script type="text/javascript">function ResetForm(form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ){
myForm.select[i].selectedIndex =0; } }
</script>
There is no such property as someForm.select, try this instead:
selectTags = myForm.getElementsByTagName("select");
for(var i = 0; i < selectTags.length; i++) {
selectTags[i].selectedIndex =0;
}
A quick note to answer from Ron Royston
(I've only tried this on Chrome 74.0)
Setting mySelect.selectedIndex = 0; or $('#mySelect').prop("selectedIndex", 0); won't work if the option if it's disabled.
Hope this saves someone some time and frustration!
You simply need to set the .selectedIndex property, as in mySelect.selectedIndex = 0;. Try out the example below.
var doc = document;
var myCheckbox = doc.getElementById('my-checkbox');
var mySelect = doc.getElementById('my-select');
myCheckbox.addEventListener("click", function(e){
if (this.checked){
mySelect.disabled = false;
} else {
mySelect.selectedIndex = 0;
mySelect.disabled = true;
}
});
<label><input type="checkbox" id="my-checkbox" value=""> Enable Dropdown</label><br>
<select id="my-select" disabled>
<option class="placeholder" selected disabled value="">Select credential</option>
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
This will set every selection directly after changing to the first option:
<select onchange="your_selection_func(); this.selectedIndex=0;">
You may find jquery useful here. This SHOULD do the trick...
$(function()
{
$('.resetButton').click(function()
{
$(this).closest('form').find('select').each(function()
{
$(this)[0].selectedIndex=0;
});
});
});
<input type="reset" class="resetButton" />
I found some hack:
<select onchange="doSomething()">
<option value="a" selected disabled hidden>a</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="…">…</option>
</select>
combination of selected disabled hidden causes that (visualy) first option responds with change event (even with same value!).
Working with IE, Edge, Opera, Chrome, but not working in FF :(
I realize this is kinda old, but wanted to improve on teh1's answer. There's no reason to create a jQuery object from 'this' when you're just going to grab the DOM element back from it:
$(this).closest('form').find('select').each(function() {
this.selectedIndex = 0;
});
I m using jQuery 1.7+ latest .on method, but failed to implements, please help me.
working Fiddle.
basically here is my
HTML
<ul id="sortByRight" >
<li id="1">List</li>
<li id="2">Photo</li>
<li id="3">Map</li>
</ul>
<select name="sort" id="sort" >
<option value="1">Recommended</option>
<option value="2">Price: low to high</option>
<option value="3">Price: high to low </option>
<option value="4">Newest</option>
</select>
jQuery code
$(document).on('change click', 'ul#sortByRight,select#sort', function() {
selectedOption = $('select#sort').val();
whatToShow = $(this).attr('id');
alert('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);
}
);
now I havebelow problems/queries.
can we bind one event with one selector i.e. above function should be called
EITHER on change of selectbox OR on click of ul.
how to set data argument in .on method. I have tried like below
$(document).on('change click', 'ul#sortByRight,select#sort',
{ selectedOption : $('select#sort').val(), whatToShow : $(this).attr('id') } ,
function(){console.log('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);}
);
but get an error that selectedOption is not defined.
can we write something like this $(this, li); because I need the id of li not the id of selectbox.
if there is any other optimized solution ( using function like live or bind ), then please tell me.
Thanks A Lot.
I'm not 100% clear on what you actually want to do, but one thing doesn't make much sense. You want to send the ID of the LI when the select box is changed. Which LI? The last LI clicked? You need to store the state of the active LI so that you can send it in the ajax request if the select box is changed.
Perhaps something like this:
$('select#sort').change(function() {
processAjax();
});
$('ul#sortByRight > li > a').click(function() {
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
processAjax();
});
function processAjax() {
selectedOption = $('select#sort').val();
whatToShow = $('ul#sortByRight').find('.active').attr('id');
alert('selectedOption:' + selectedOption + 'whatToShow:' + whatToShow);
}
or check out the jsFiddle