I am trying to select an <option> in a <select>, but no matter what I do, the first <option> is always selected. Here is the code:
<select value="{{item.theme}}">
<option template repeat="{{theme in allThemes}}"
selected?="{{theme == initialSelectValue}}">
{{theme}}
</option>
</select>
This happens even if {{theme == initialSelectValue}} returns true. Further, looking at the markup generated, the correct <option> has the selected attribute correctly applied, yet it is not selected.
Anyone know what is wrong? And is there an alternate way (perhaps using selectedIndex) that I can use instead?
Using Polymer version 0.10.1+1.
It looks like you run into this bug
https://code.google.com/p/dart/issues/detail?id=19467
A default value for an #observable field causes problems.
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.
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.
Ok so I am working on a project that was outsourced and now I get to jump in and fix everything before it gets pushed to production. I am currently trying to modify a line that creates a select form field. I read up on some of the different form helper methods to use in ruby, and over some of the available options for the method.
My problem is I can't seem to figure out how to get a default value to be displayed inside the select element without having it show up in the drop down options. This is what the line currently looks like.
<%= select :profile, :sexual_interest, SEXUAL_INTEREST_ARRAY, {:prompt => 'sexuality'}, {:class => 'selectFull'} %>
I tried changing some of the options using :default => 'sexuality' and then tried :disabled => 'sexuality'. But I seem to only be able to remove the option entirely from the select element or have it as the first value in the drop down list and being displayed as the default value.
If you are just having issues setting the default value of your select field using a ruby form helper, reference this post selecting a default for option field
If any one could give me some insight as to how to fix this issue I would greatly appreciate it. Any ideas would help, Thanks for reading.
-Alan
It is not possible to do that in HTML, so you'll have to use another approach.
Possible solution
Suppose you have:
<select name="selectBox" id="selectBox">
<option value="default">default</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
Then your javascript will looklike this:
$("#selectBox").change(function(){
$("#selectBox option[value='default']").remove();
});
The example on jsFiddle
Selectors
$('#selectBox option[value="SEL1"]')
For an index:
$('#selectBox option:eq(1)')
For a known text:
$('#selectBox option:contains("Selection 1")')
Hope it helps you!
<select id="search_user_id_equals_any" name="search[user_id_equals_any]">
<option value="2">My Stuff</option>
<option value="-1,1,2,3,4,5">All Users</option>
<option value="3">The Cat</option>
</select>
So, above is the drop down I want to verify something is selected in.
Now, when you click on something, it doesn't add the selected="selected" to whatever option you click, so I don't know how to figure out the selection.
ideas?
How about:
find_field(search_user_id_equals_any).value.should =~ /#{your_expected_value}/
?
You can see from the Capybara source how the value method works:
option = native.xpath(".//option[#selected='selected']").first || native.xpath(".//option").first
option[:value] || option.content if option
So it looks like by design it will return the option's value, if present, and otherwise it will return the text content. And note how if no option is selected, it will default to the first, as a real browser would.
To get the behaviour you want, you could do something like this:
node = find_field('search_user_id_equals_any')
option = node.xpath(".//option[#selected='selected']").first || node.xpath(".//option").first
option_text = option.content
With the <g:select> tag... sometimes it displays normally like a selection drop down box, while sometimes it displays with multiple rows, this is very annoying.... Even I put the size="1" into the <g:select>, it still displays multiple rows... is there anyone knows how to make <g:select> display correctly? with only one item visible, like a dropdown box. Thanks!!
<g:select size="1" id="s_caseID" name="s_caseID" value="${t1T2InstanceListTotal?.Accession_No}"
noSelection="${['null':'Select One...']}"
from='${t1T2InstanceListTotal}'
optionKey="Accession_No" optionValue="Accession_No" onclick="this.form.submit();" >
</g:select>
Here's the taglib code that cause the multiple="multiple" attribute to be rendered (if not explicitly declared on the tag):
def value = attrs.remove('value')
if (value instanceof Collection && attrs.multiple == null) {
attrs.multiple = 'multiple'
}
Therefore, it looks like you're passing a Collection as the <g:select>'s value attribute instead of a single value. Is that what you're intending to do?
Set the multiple attribute to false
<g:select name="cars"
from="${Car.list()}"
value="${person?.cars*.id}"
optionKey="id"
multiple="false" />
If the "value" is a list, g:select always considers it as a multiple select. To avoid this and have a single select drop-down just ignore the value attribute and use keys option instead!
This works fine for me!
`<g:select id="s_caseID" name="s_caseID" from='${t1T2InstanceListTotal}'
noSelection="${['null':'Select One...']}"
keys="${t1T2InstanceListTotal?.Accession_No}" onclick="this.form.submit();">
</g:select>`