I have a dropdown select menu rendered via this code
#Html.DropDownListFor(m => m.OwnedItemId, Model.Plans, "Select a plan type", new {#class = "selectMenu", id="addPlanSelectmenu"})
In the view it looks something like this:
<select class="selectMenu" data-val="true" data-val-number="The field OwnedItemId must be a number." id="addPlanSelectmenu" name="OwnedItemId" aria-disabled="false" style="display: none;">
<option value="">Select a plan type</option>
<option value="143863">RetirementSaving (143863)</option>
<option value="143876">BankAccount (143876)</option>
<option value="143913">RetirementSaving (143913)</option>
<option value="143929">RetirementSaving (143929)</option>
<option value="144030">BankAccount (144030)</option>
...
</select>
I would like to go to the default option after submitting but I can't make it work. So far I have tried quite a few things, like the one proposed in this answer, using
$('#addPlanSelectmenu').selectmenu("value", "");
Funny enough to my understanding if I do something like this
$('#addPlanSelectmenu').selectmenu("value", null); //Or an unexisting value
it goes back to the last option of the list.
Any idea?
Thanks
Edit: I forgot to mention that I guess a clean way is just adding a value to the default text, but I don't even know if it's possible with these helpers
Edit 2:
I eventually made it work using this answer
Try this code:
$('#addPlanSelectmenu').selectmenu("index", 0);
Similar as resetting - the only solution working to me:
$('#resetButton').click(function() {
$("#Service").selectmenu('destroy');
$("#Service").prop('selectedIndex',0);
$("#Service").selectmenu();
})';
A little late to the party, however considering that all the other answers are either incorrect or incomplete, I'll throw in my 2 cents!
All you need to do is
$('.selectmenu').val(""); // your default option's value
$('.selectmenu').selectmenu("refresh");
Well in MVC #Html.DropDownListFor this worked for me using jquery.
if ('#resetButton').click(function(){
$("#id").select2('data', null);
}
Related
I have a view, with a list that i have populated. I want to have a DisplayFor that will change and show what is selected in the drop down list.
This is my view so far. I have tried googling the problem, and after a few hours of reading through pages i cant find anything specific to what i am trying.
<select id="Test1">
<option value="test">Role1</option>
<option value="test">Role2</option>
<option value="test">Role3</option>
<option value="test">Role4</option>
</select>
#Html.DisplayFor(Test1)
But of course this will just not work. And i really dont know what to try now.
I tried using Test1.selected, and i also tried having Test1 as a model then pass a list through, but it would require a page to be refreshed.
I've got a select menu that I've created with Thymeleaf. I need the menu to have no default choice. Usually this is done with a disabled extra option, and that I have done too. Now, the issue is that I just cannot get the selected attribute to render into the resulting HTML. This appears to break IE, which then defaults to the first non-disabled option. This is what I've got:
<select th:field="*{serviceName}" required="required" >
<option th:selected="true" th:disabled="true" th:value="NOT_SELECTED" th:text="'Pick one'"></option>
<option th:each="entry : ${form.services}"
th:value="${entry.key}" th:text="${entry.value}">
</option>
</select>
and it renders like this:
<select required="required" id="serviceTechnicalName" name="serviceTechnicalName">
<option disabled="disabled" value="NOT_SELECTED">Pick one</option>
<option value="SERVICE1">Service One</option>
<option value="SERVICE2">Service Two</option>
</select>
What am I doing wrong? I've been fiddling with different combinations of these different options for at least an hour already, it shouldn't be this difficult...
FWIW, this appears to be a duplicate question, but the answers there aren't doing it for me. There also isn't an accepted answer there.
Apparently, when using th:field it does not work. Look at this post.
However, I do not think you have to use th:selected as there is no processing in the server.
Have you tryied something like:
<select th:field="*{serviceName}" required="required" >
<option value="" selected="selected">Selecione</option>
<option th:each="entry : ${form.services}"
th:value="${entry.key}" th:text="${entry.value}">
</option>
</select>
Well, the forum post that Kimy82 suggested goes deep down into some Java configuration hole, so the solution did not appeal to me.
I then upgraded my Spring Boot from 1.3.3-RELEASE to 1.4.0-RELEASE. Then I spent a while trying to upgrade Thymeleaf from version 2 to version 3, but apparently could not get all the dependencies and excluded transitive dependencies right.
So in the end I did this:
<script type="text/javascript">
window.addEventListener('load', function () {
document.getElementById('serviceTechnicalName').value='NOT_SELECTED';
});
</script>
Now, it's not the answer I was looking for, but it does the job...
I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :
<form id="form" method="POST" action="webservices/action.php">
<select id="subject">
<option value='0' data-i18n="contact.email" selected></option>
<option value='1' data-i18n="contact.name"></option>
<option value='2' data-i18n="contact.object"></option>
</select>
</form>
The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.
I don't have any problem when not using i18next.
Anyone have an idea how to fix this issue ?
I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:
document.getElementById("form").reset();
The form is now displayed correctly.
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.
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