I am using Ionic Framework.
I would like to enter the first option as the default, but doing it this way does not work.
What can I do?
<select ng-model="newSpesaAereo.valuta">
<option ng-selected="selected">Euro</option>
<option>Dollaro</option>
<option>Dollaro canadese</option>
<option>Sterlina</option>
</select>
If I analyze the page with Google Chrome Developer Utility I watch this.
If I edit this HTML and I delete the selected row, then Euro is visible.
Why is this happening?
Set ng-selected="true".
Example:
<option ng-selected="true">Carta di credito</option>
The reason the default option isn't working is because, in your controller, you've likely initialised your form model like so:
$scope.newSpesaAereo = {}
If you want to set default form options, you should also set them in the form model. For example, set 'valuta' to 'Euro' like so:
$scope.newSpesaAereo = { valuta: "Euro" }
I hope this helps!
P.S when posting issues like this you should also include the code for the controller that the view is bound to.
You need to use ng-selected instead of just selected.
https://docs.angularjs.org/api/ng/directive/ngSelected
<select ng-model="newSpesaAereo.metodoPagamento">
<option ng-selected="selected">Carta di credito</option>
<option>Bancomat</option>
<option>Contanti</option>
<option>Altro</option>
</select>
Related
Here is an exemple of what I have:
forms.py
class aForm(forms.Form):
choices = [
('value1', 'choice1'),
('value2', 'choice2'),
('value3', 'choice3')
]
dropDownList = forms.ChoiceField(
choices=choices)
I want to add the attribute Disabledd to the first choice, like this:
<select>
<option selected value="value1" disabled>choice1</option>
<option selected value="value2">choice2</option>
<option selected value="value3">choice3</option>
</select>
How can I add that Disabled attribute from the forms.py file ?
After long search I didn't find the solution am looking for, but I did pass that problem with another aproch, what I did is creating a completly RAW html form from scratch where I had full power so I added the "disabled" attribute to the first option, without touching the views.py file, what I mean is am still using forms.Form and all the validations I already writen, this works by just naming your the fields in the RAW html form the same names as in the Form.
You can have a look at solution to this question. It pretty much addresses the same.
Disable Choice In ModelMultipleChoiceField CheckBoxSelectMultiple Django
<select ng-model="form.priority" ng-options="priority.id as priority.value for priority in leadPriority"></select>
It is showing blank option by default. How can remove it ?
Use ng-init in options
eg.
<select ng-model="form.priority" ng-options="priority.id as priority.value for priority in leadPriority" ng-init="form.priority = leadPriority[0].id"></select>
You can set in the controller as,
$scope.form.priority = $scope.leadPriority[0].id;
You can use ui-select which is more powerful version of select. You can find sample code for it here. You will need to include the js and css file from their library here.
I want to ask about html dropdown menu. As we know, that option tag in html only support text. However, I need to create a drowp down menu that show list of image. I've searched for it. And I found several ways, including using css or jquery. However, that's not what I want. Here is, what I want to create:
<option value = blablabla><img src = "img/blbalba.txt"></option>
The code above is not working. Is there any sugestion to display dropdown menu like that?
Thank you for your help.
As You can't do that in plain HTML, but you can do it with JQuery.
Right now You can do like this
<select>
<option value="img1" style="background-image:url(images/img1.png);">image 1</option>
<option value="img2" style="background-image:url(images/img2.png);">image 2</option>
<option value="img3" style="background-image:url(images/img3.png);">image 3</option>
<option value="img4" style="background-image:url(images/img4.png);">image 4 </option>
</select>
Browsers will only render text inside a select tag, so, if you wan to use a selector that shows images instead of text, you cannot use a select you'll need to build your own selectable object.
That could be quite difficult to do. You can use different premade solutions that people on your situation developed before or try to reinvent the wheel.
Check this :)
A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
What is so cool about this plugin!
Adds images and description to otherwise boring drop downs.
Allows JSON to populate the drop down options.
Converts your HTML select element to ddSlick.
Uses Minimum css and no external stylesheets to download.
Supports callback functions on selection.
Works as good even without images or description!
http://designwithpc.com/Plugins/ddSlick#demo
Hello (this is a copy of my post on the Seaside mailing list; first try at stackoverflow),
How do I get the rendered display of a drop-down select list to show an updated selection from another session, in Firefox? (I'm using 3.6.13)
This problem does not appear in Chrome, IE or Opera.
Here is the scenario: I have a domain object with an attribute displayed in a drop-down list. Some other session updates the attribute. I refresh my display, but the rendered selection does not change. Using Firebug, the generated html shows the updated selection. This may be basic HTML knowledge, but should the displayed value not update to show the changed 'selected' option? Or is the value intended to be set only on the initial page display and then only by a user action?
Example: I have a demo Seaside component with a class variable #testStateListSelection which is selected to 'one' in a Seaside session. If I change the value to 'three' in another Seaside session, the displayed value stays as 'one' in the original session after rendering again, even though the "selected" in the generated HTML shows "three".
renderSelectionListOn: html
html form: [
html select
list: #('one' 'two' 'three' 'four' 'five');
selected: self class testStateListSelection;
callback: [:value | self class testStateListSelection: value].
html break.
html submitButton
callback: [Transcript cr; show: self class testStateListSelection];
with: 'Save']
...the displayed value shows 'one', even though the HTML is...
<select name="1">
<option value="1">one</option>
<option value="2">two</option>
<option value="3" selected="selected">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
How do I get the drop-down selected value to show 'three'?
BTW: all I know about HTML & browser behaviour I've learned from coding Seaside, so I may have a skewed perspective ;-)
Thanks for any help.
The problem is that, when you refresh your page, your browser is remembering which option was previously selected. This feature is designed to make it harder to lose your form data during long forms and is discussed a bit on the Mozillazine forums
Instead of refreshing the page. if you load the page "fresh" by going to the address bar and pressing return, you'll get the page loaded from the server again - with the updated select
Another cause of the problem might be that your browser tries to autocomplete the form for you based on your last submission. Make sure you have disabled this feature in the preferences of your web browser. You can also try to tell the form-tag with an unofficial attribute not to autocomplete:
html form noAutocomplete; with: [ ...
Whenever the page is refreshed the accessor self class testStateListSelection is run.
In fact the code you provide works perfectly for me. Are you sure that the accessors work as expected?
testStateListSelection
^ testStateListSelection " <-- forgetting the return is a common problem "
testStateListSelection: aString
testStateListSelection := aString
If using javascript to refresh the page...
window.location.reload();
...will NOT re-render the select elements. They will retain their dynamic values regardless of what the new source HTML says.
To force the select elements to re-render, use...
window.location.reload(true);
I have a multiple selection SELECT field which I don't want the end user to be able to change the value of.
For UI reasons, I would like to be able to do this without using the disabled="true" attribute. I've tried using onmousedown, onfocus, onclick and setting each to blur or return false but with no success.
Can this be done or am I trying to do the impossible?
I know you mentioned that you don't want to, but I actually think that using the disabled attribute is a better solution:
<select multiple="multiple">
<option value="volvo" selected="true" disabled="disabled">Volvo</option>
<option value="saab" disabled="disabled">Saab</option>
<option value="opel" disabled="disabled">Opel</option>
<option value="audi" disabled="disabled">Audi</option>
</select>
If necessary, you can always give the select a class and style it with CSS. This solution will work in all browsers regardless of scripting capabilities.
Could you do it with an onchange event?
<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">
Your best bet would be to swap out the options within the select box. If you only have one answer in that box, it doesn't matter if it is clickable.
I would, however, try to find another way of doing this as it seems like it would cause frustration for a user. Imagine this user scenario:
"Look, a select box of options."
click
"Hrm, why didn't that work?"
click
click!
"This stupid thing is broken, I'm never coming back here."
If you swap out the select for HTML text, it accomplishes the same goal. This is a fairly simple task for most of the major Javascript frameworks.
#Jack & #17 of 26, good point but the end user will be expecting the select box to be disabled so that confusion shouldn't be an issue.
I should have been clearer about why I couldn't just disable the control.
The application that will be using this will need to disable the selection of the options and there is a requirement that the "locked" control still maintain the look and feel of normal form controls.
Try this trigger.
<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>
There is a recent new addition to CSS3 that is 95% compatible with all current browsers except Opera Mini, called pointer-events. Put simply, you can "disable" the default action on a SELECT or any other element, and still be able to perform specific events on it...
You can view Chris Coyier's article on them at enter link description here.
Is this closer to what you're looking for... Sorry that I couldn't provide any of my own coding examples...