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.
Related
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.
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);
}
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
I'm using Freemarker as the templating engine for a Struts 2 application and having some problems trying to pass a Freemarker hash to the #s.select tag's list value.
Currently I'm trying something like this in my template:
<#s.select name="myDropdown" list={"1":"Foo", "2":"Bar", 3:"Baz"} />
The resulting HTML that's rendered is this:
<select name="myDropdown" id="myDropdown">
<option value="freemarker.ext.beans.HashAdapter$1$1$1#2c9bebb">freemarker.ext.beans.HashAdapter$1$1$1#2c9bebb</option>
<option value="freemarker.ext.beans.HashAdapter$1$1$1#16ca4a">freemarker.ext.beans.HashAdapter$1$1$1#16ca4a</option>
<option value="freemarker.ext.beans.HashAdapter$1$1$1#173ee8">freemarker.ext.beans.HashAdapter$1$1$1#173ee8</option>
</select>
Based on the documentation it seems like this should work, but really the only examples are of using Freemarker lists. Hashes are only mentioned as another option, but I haven't been able to find any code examples that use them.
Ultimately my question is, what Freemarker syntax should I use with the Struts 2 select tag in order to render the following HTML?
<select name="myDropdown" id="myDropdown">
<option value="1">Foo</option>
<option value="2">Bar</option>
<option value="3">Baz</option>
</select>
Using the listKey and listValue properties of the select tag seems to do the trick.
The working code is now:
<#s.select name="myDropdown" list={"1":"Foo", "2":"Bar", 3:"Baz"} listKey="key" listValue="value" />
Seems like that should be taken care of automatically by the tag, but I was not able to get it to work without explicitly setting those two additional properties.