I have a select box on my form which is getting displayed using addOption. Below the code for the same
storeData = response.myData;
var select = dijit.byId('mySelect');
select.addOption(storeData.items);
HTML declaration of Select box
<select id="mySelect" data-dojo-type="dijit/form/Select" data-dojo-attach-point="mySelect" data-dojo-props="name:'mySelect', placeHolder: 'Select a value', value:''"></select>
In the storeData, I am returning list of JSON objects including a blank option. (label="" and value=" ");
I want the place holder text to get displayed when no option is selected. But by default first option (i.e. blank value option) is getting selected and because of that place holder text is not getting displayed. If I remove the blank value option from list of options, then the option after that is getting selected by default.
Is there any way where I can set the selection to none. Any pointer for this issue?
dijit/form/Select acts as a normal selection box element (simply said it's an enhanced form of <select>). It's the default behavior of such a select box to select the first option by default.
Either way, the dijit/form/Select widget does not support placeholders I think, neither is it documented in the API docs.
As an alternative you could use the dijit/form/ComboBox or dijit/form/FilteringSelect widget, which both support the placeHolder property.
Another common practice (at least with <select>) is that you add a default selected and disabled item, which acts as your placeholder, for example:
<select name="select1" data-dojo-type="dijit/form/Select">
<option disabled="disabled" selected="selected" value="">- Select a state -</option>
<option value="TN">Tennessee</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
Demo: JSFiddle
Related
I am trying to set up a select dropdown menu, using TeaVM Flavour HTML templates.
While the doc mentions how to do it with a static list of options, it doesn't show how to handle a dynamic list of options.
The trick is to use html:value, which applies both to <input> tags as well as <option> tags:
<select name="mySelect" html:bidir-value="myResult">
<std:foreach var="myOption" in="myList">
<option html:value="myOption">
<html:text value="myOption"/>
</option>
</std:foreach>
</select>
I know how to get the value of the selected option in the dropdown in controller. Using
params[:category_id]
My question is for a select like this
<select name="category_id">
<option value="0">New</option>
<option value="1">SubCategory1</option>
<option value="2">SubCategory2</option>
<option value="3">SubCategory3</option>
</select>
How can i also get the selected text after request is posted to controller? So if user selects Option 1, I want "0" as well as "New".
#shaurya, Not sure why you want the text value from the form post. Can you look up the value in config['Categories'] using category_id?
When using the ui-select2 (https://github.com/angular-ui/ui-select2), the preselected option is not shown properly.
I created a plunkr: http://plnkr.co/edit/Ek86jUciPo7rgBnbKdFc
When the page is loaded, the model of the select is set to the second option. And somehow, it is properly set in the select box, see: https://dl.dropboxusercontent.com/u/1004639/stackoverflow/screenshot-select2.png. But the value is not shown above the text box. Or in the select box when the select box is closed.
PS: I tried it without ng-options. Same problem.
I can get it working using ng-repeat and ng-selected. Unfortunately, though, when you use ng-repeat, you can only bind to a string. It's not ideal, but the choice does start out pre-selected.
Here's a working http://plnkr.co/edit/jodn35fvUQpdD2d5BpoC
<select ui-select2="" ng-model="selectedId" >
<option value="">Choose...</option>
<option ng-repeat="option in options" value="{{option.id}}" ng-selected="{{option.id == selectedId}}">{{option.name}}</option>
</select>
And I updated the JS to add this line:
$scope.selectedId = $scope.selected.id;
https://github.com/angular-ui/ui-select2#working-with-dynamic-options
ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead.
I have a page that contains a select element for creating a new object.
When a user visits the page, if he/she selects a value from the select element and then reloads the page (using cmd|ctrl + R) the select keeps the value even though the value was never submitted.
I don't want the option to be remembered upon reloading since it was never submitted.
I tried adding in my application controller a before filter in order to disable cache:
before_filter :disable_cache
def disable_cache
expires_now
end
Using a browser tool (HttpFox) I get the response header:
Cache-control no-cache, private
and the response body has no selected option in it but while rendering, user's selected option before the reloading of the page is still there.
Response body:
<select class="select optional" id="an_id" name="a_name">
<option value=""></option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
An actual reset for the select happens only when using cmd|ctrl + shift + r
Any ideas?
Workaround: I had to disable autocomplete.
Either on specific element or the the hole form.
I found the solution from here
Is there a good way to make an HTML dropdown read only. Using disabled attribute of select seems to work, but the value is not posted.
<select disabled="disabled">
I have a complex page with lots of javascript and ajax. Some actions in the form cause to drop down to be read only some actions let user decide the value.
Edit: Is there a better way other than using a hidden input?
If you do not want user to pick an option, how is this different from read-only input type="text"?
<select name="selectbox" disabled="disabled">
<option>option 1</option>
<option selected="selected">option 2</option>
<option>option 3</option>
</select>
Correct me if I am wrong, but if an option is selected, the value is sent