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?
Related
I use the following code in my app with reactive forms.
If I uncomment the [multiple] line, the Choose ... option does not set the dformControl form control object back to status INVALID.
dformControl.multiple by the way returns false. Even if I change the commented line to [multiple]="false", still switching back to the Choose ... option does NOT set the form control status to INVALID.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
/*[multiple]="dformControl.multiple"*/>
<option *ngIf="!dformControl.value"
value="">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
Bind to the multiple property at the select level to a boolean isMultiple. Then you can change it and the select will change as well. Take a look at the this, I change it using a button. plnkr
<select formControlName="cars" [multiple]="isMultiple">
<option></option>
<option *ngFor="let car of cars" >{{car}}</option>
</select>
It seems when adding the multiple property it is affecting the required validator. I was able to just add an extra validator and it worked as expected.
Validators.compose([Validators.required,Validators.pattern('.+')]
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
I have two selects that initially render this way in both firefox and IE8:
<select id="cntctMap_PRSNL_TITL_TXT" >
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA"">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
So far so good as only the first select has a value returned from the server-side, the second does not.
On document load I pull the html for the second select, i.e. $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA").html());
In IE the returned string is:
<option selected value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
Notice the 'selected' attribute
But in firefox it's:
<option value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
The reason this is important to me is that I want to prepend an option, i.e.
$("#cntctMapCUST_SEGM_US_RETAIL_SALES_SMA").prepend(selectOption);
And have the prepended option value show in the dropdown box, but I only want to do this for those selects that don't have a server-side value.
In IE, I can't tell which is which since 'selected' comes back in all cases. This is also true if I use $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA option:selected")); In IE, it always returns a 'selected' option.
Anyone know a way around this?
As discussed in the comments, I suggest adding a special class (e.g. has-default) to selects that have server-side values. This is done on the server-side when you render the tags.
<select id="cntctMap_PRSNL_TITL_TXT" class="has-default">
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
...
Using jQuery, you can target selects with server-side values:
$('select.has-default').prepend(selectOption);
The above statement will only prepend selectOption to selects that have the has-default class. This is more consistent because it doesn't rely on whether browsers mingle with the <option> tags.
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 ;)
I theory seems to be the answer to the pre populated selectbox issue.
<cfselect name = "regions" query = "getRegions" selected="10" value="id" display="name" ></cfselect>
this is what it outouts
<option value="8">Dumfries & Galloway</option>
<option value="9">Dundee City</option>
<option value="10" selected="selected">East Ayrshire</option>
<option value="11">East Dunbartonshire</option>
but my option 10 is not selected automatically. The html looks ok any reason why?
Thanks,
R.
If you are using Firefox then that is probably the reason, because it keeps form values persistent across page reloads. You can use a different browser, or add something to the query string like ?abc=123.