I have a select element that is in the DOM from page load. Lets say it has an id of my_select like so:
<select name="my_select" id="my_select">
</select>
At some point though when the user does something some values are pulled in via ajax to populate this select element so that it now contains options. So it will now look like this:
<select name="my_select" id="my_select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
So how do I then add an attribute to one of these options?
I want to do this:
$('#my_select option[value="2"]').attr("selected", "selected");
But I think I need to use live() because the options were added via ajax after the DOM had been created.
Thanks
$("body").delegate('#my_select", 'YOUREVENT', function(){
$("#my_select option[value='2']").attr("selected", "selected");
});
Just setting the selected option can be done like this: $('#my_select').val(2); Are you looking for more?
$.live is the same as $.bind, for event binding, the diference is "live" works for elements than not exists yet, and will be created by DOM scripting (i.e. ajax response).
the right form to set val = 2 is $('#my_select').val(2), when it's already in the dom ;)
Related
I have seen some other posts using below format but it did not work at all, even the select is not opening:
.click(".selectpicker option[value='somevalue']")
But when I wrote like this:
.click("select[id='chooseone']")
it did open the dropdown.
This is how select looks like:
<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>
There is react code in backend, so an onchange event is fired which will display appropriate input field per option and a submit button.
My test is basically:
select an option
fill fields
submit
validate result container
How should I write this code? This is my first time in such thing. Any help is appreciated.
Thanks
UPDATE >>>
This was in Safari and it did not work. But when I installed chromedriver, it did work. Here is the working code:
.click('select[id="searchBySelect"] option[value="any_option_value"]')
This will click the provided option in the select element.
First you need to open the dropdown menu. It looks like you already know this but in any case you would start with:
browser.click('.selectpicker');
Then there are a couple of ways you can get the option you want to click. You can choose a specific option by doing something like this (just modify it to select whichever option you want)
browser.element('css selector', '.selectpicker', function(element) {
browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
browser.elementIdClick(option.ELEMENT);
});
});
Or you could get all of the options in an array and click on one of them this way:
browser.elements('css selector', 'option', function(elements) {
browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});
tehbeardedone thanks so much for providing your solution. I had to do a small fix to get the elementIdClick() working.
Instead of option.ELEMENT
I had to use option.value.ELEMENT
Since my code snippet had to be added to a page object, this is its final version:
let durationOptionSelector = `option[contains(text(), "${duration}")]`; //dynamic option selector
this.click("#duration_dropdown");
this.api.element("xpath", "#duration_dropdown", function (dropdown) {
this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
this.elementIdClick(option.value.ELEMENT);
});
});
I would like to use a <select> in a form to let the user being able to update values among different <option>. I have used the technique from the guide here: https://angular.io/docs/ts/latest/guide/forms.html. Here is the sample I am talking about:
<div class="form-group">
<label for="type">Type :</label>
<select class="form-control" [(ngModel)]="order.type" ngControl="type">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
</div>
In my order-details.component I have got an updateOrder() which calls the updateOrder() from myApp.services.
My problem is when I am trying to send the data from the form to the back-end: all the parts with an <input> are OK, but not those with <select> (it returns the original values, and not the one selected).
Does anyone have encountered this or a similar problem?
Thanks for your help!
There is a way to get the value from different options.
check this plunker
component.html
<select class="form-control" #t (change)="callType(t.value)">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
component.ts
this.types = [ 'type1', 'type2', 'type3' ];
this.order = {
type: 'type1'
};
callType(value){
console.log(value);
this.order.type=value;
}
Been tackling this problem for a few hours.
Checked in the (incomplete) documentation to find an item in the NgSelectOption page called "ngValue"
Not sure if this is the intended use but it seemed to work fine.
So instead of using
[value]="item"
Use:
[ngValue]="item"
Just use ngModel on the select and ngModelChange event if you want to do something when it changes.
In fact I can't reproduce your problem. I created a plunkr with a very simple form with an input and a select. When I submit the form, I have actual values in the bound object. See this plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.
Feel free to tell me if I didn't correctly understand your problem.
Thierry
If you have static, hard-coded values for the select tag like below:
<select #quantity>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
You can do the following:
#ViewChild('quantity') quantity: ElementRef;
console.log(this.quantity.nativeElement.value); // will print value of the currently selected option
How can i call a method when the value is changed using Angular 2?
<select [(ngModel)]="searchMonster">
<option>36</option>
<option>37</option>
</select>
I tried to use ng-change but had no success.
Use ngModelChange. check the template syntax docs.
try this
<select
[ngModel]="searchMonster"
(ngModelChange)="yourMethod($event)">
<option>36</option>
<option>37</option>
</select>
an alternative worked with me for <input> tag, try this for <select>
<select #option
[ngModel]="searchMonster"
(ngModelChange)="yourMethod(option.value)">
<option>36</option>
<option>37</option>
</select>
Basically upto my observations [(ngModel)] is called when we have to use two way data Binding in angular. so view and controller/method is called via binding. we can use [(ngModel)] as [ngModel] and (ngModelChange) for change detection but in This case onChange() gets called twice for each select list change that way according to this answer here but as you want to call a method on change you can use this way here:-
<select [(ngModel)]="selectedDevice" #device (change)="onChange(device.value)">
<option *ngFor="#i of devices">{{i}}</option>
</select>
onChange(deviceValue) {
console.log(deviceValue);
}
i found best answer to this question is this
I'm creating a template showcase theme that has a set of image blocks and i'm having a custom contact form too. As soon as users selects an image it'll dynamically select from my custom form's select option too.
Now i'm trying to hide my select option field,
My code is
<form action="">
<select name="templates">
<option value="THEME001">THEME001</option>
<option value="THEME002">THEME002</option>
<option value="THEME003">THEME003</option>
<option value="THEME004">THEME004</option>
<option value="THEME005">THEME005</option>
</select>
</form>
So far i tried type="hidden" but its not working. Is there any other way to do it other than using ccs visibility:hidden
You can use jquery's hide function like
$("select").hide();
I think you can remove it by Jquery's remove function.
$("select").remove();
Just pick the select element and you can use these Jquery functions to hide or remove your select element
With javascript you have to use like the following (display = 'none')
document.getElementById('THE ID OF YOUR SELECT BOX').style.display = 'none'
I am using Zend 1.11.10 and I am trying to set a value in a dropdown list. My code is:
$state = new Zend_Form_Element_Select("mytest");
$state->setLabel("mytest")
->setName("mytest");
$state->addMultiOption('Pear','PE');
$state->addMultiOption('Banana','BA');
$state->addMultiOption('Orange','OR');
$state->addMultiOption('Kiwi','KI');
$state->setValue('Banana');
$this->addElement($state);
The problem is that the generated HTML code is:
<select id="mytest" name="mytest" style="opacity: 0;"><option value="PE">Pear</option><option selected="selected" value="BA">Banana</option><option selected="selected" value="OR">Orange</option><option selected="selected" value="KI">Kiwi</option></select>
It is making "selected" all options after "Banana". Is this a bug in Zend?
Looks to me like you're using a non-standard FormSelect view helper. For starters, your <option> value attribute and text values are reversed and you have no label attributes.
Eg, for
$state->addMultiOption('Pear','PE');
the generated markup should be
<option value="Pear" label="PE">PE</option>
I'd also hazard a guess that there's some JavaScript playing with the DOM due to the opacity style attribute.
Using your code exactly I get:
<select name="mytest" id="mytest">
<option value="Pear" label="PE">PE</option>
<option value="Banana" label="BA" selected="selected">BA</option>
<option value="Orange" label="OR">OR</option>
<option value="Kiwi" label="KI">KI</option>
</select>
this is also with 1.11.10. Are you using custom form classes or anything else that might be affecting it?