Selected Attribute on Select Option Not Working (Ember.js + Handlebars) - javascript

I am implementing a dropdown using Ember, but I cannot set the selected property of an option element using a handlebars expression.
Here is an ember-twiddle example that shows the issue. Notice how in the DOM of the twiddle, the selected attribute does not appear for the top example.
<select
aria-disabled="{{disabled}}"
aria-multiselectable="{{multiselect}}"
disabled={{cannotOpen}}
onchange={{action 'itemClicked' value='target.value'}}
>
<option selected disabled value="">{{placeholder}}</option>
{{#each items as |item|}}
<option
value={{item.value}}
selected={{if (is-item-selected item.state) "selected"}}
disabled={{item.disabled}}
>
{{item.name}}
</option>
{{/each}}
</select>
"is-item-selected" is a custom helper that returns true if "item.state
=== 2", which is does when the item is selected in the dropdown.
No matter what I try in the handlebars, the selected attribute will not display (e.g. selected={{if true "selected"}} does not work either). However, changing selected to data-selected works exactly as intended.
Is anyone aware of this issue? Or am I misunderstanding how the selected attribute is supposed to work?

So this is actually a "feature" of the dom/html. Classes and data attributes are attributes, while the selected is a property.
There's a great write-up here (about this same issue!)
And if you want to go direct (I stole this from the other answer): .prop() vs .attr()

Related

How to bind [(ngModel)] values in select2 when using angular html and ts file (without Javascript or Jquery)

I am trying to add a search option to a dropdown which performs the functionality of autocomplete. I have been given a basic dropdown with select tag.
I tried searching for the following options:
1) I tried to convert my select table into a p-dropdown table using PrimeNG but was unsuccessful.
2) I found select2 option for angular and have been unable to bind the selected value from the dropdown to the ngModel value. The value selected must be retained when navigating between the previous or next pages, however that isn't happening.
3) I tried to convert select table to p-autocomplete as well but do not know how to.
Please guide me with any one of the following ways.
This is the provided select dropdown:
<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]"
(ngModelChange)="handleChange(rowData.rowId)">
<option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]">
{{option.col_name}}
</option>
</select>
This is what I tried with select2 for angular.
{{option.col_name}}
Error: No value accessor for form control with unspecified name attribute
This error is thrown for the following line:
[(ngModel)]="selectedColumnDetails[rowData.rowId]
try to add the name attribute along with ngmodel in the same tag
<select> works slightly differently with ngModel.
Taking your code snippet, Modifying it to pick ControlValue
<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]"
(ngModelChange)="handleChange(rowData.rowId)">
<option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]" [(ngValue)]="option">
{{option.col_name}}
</option>
</select>
Should work for you.
You should find ample examples provided by angular here and here
For select2 in Angular, try:
<select2 ... [value]="selectedColumnDetails[rowData.rowId]" (valueChanged)="handleChange(rowData.rowId)"></select2>
Of course, you would have to update selectedColumnDetails[rowData.rowId] inside handleChange(rowData.rowId).
[(ngModel)]="data" is short for [value]="data" (input)="data = $event.target.value". Unfortunately the ng2-select2 package does not support the input event so you have to write this out in the long form with valueChanged.

attr('selected','selected') not working in selectpicker bootsrap with ajax [duplicate]

I am attempting to retrieve and set the selected value of a select element (drop down list) with jQuery.
for retrievel i have tried $("#myId").find(':selected').val(), as well as $("#myId").val() but both return undefined.
Any insight into this problem would be much appreciated.
to get/set the actual selectedIndex property of the select element use:
$("#select-id").prop("selectedIndex");
$("#select-id").prop("selectedIndex",1);
The way you have it is correct at the moment. Either the id of the select is not what you say or you have some issues in the dom.
Check the Id of the element and also check your markup validates at here at W3c.
Without a valid dom jQuery cannot work correctly with the selectors.
If the id's are correct and your dom validates then the following applies:
To Read Select Option Value
$('#selectId').val();
To Set Select Option Value
$('#selectId').val('newValue');
To Read Selected Text
$('#selectId>option:selected').text();
$('#myId').val() should do it, failing that I would try:
$('#myId option:selected').val()
When setting with JQM, don't forget to update the UI:
$('#selectId').val('newValue').selectmenu('refresh', true);
$("#myId").val() should work if myid is the select element id!
This would set the selected item: $("#myId").val('VALUE');
Suppose you have created a Drop Down list using SELECT tag like as follows,
<select id="Country">
Now if you want to see what is the selected value from drop down using JQuery then, simply put following line to retrieve that value..
var result= $("#Country option:selected").text();
it will work fine.
I know this is old but I just had a bear of a time with Razor, could not get it to work no matter how hard I tried. Kept coming back as "undefined" no matter if I used "text" or "html" for attribute. Finally I added "data-value" attribute to the option and it read that just fine.
<option value="1" data-value="MyText">MyText</option>
var DisplayText = $(this).find("option:selected").attr("data-value");
$( "#myId option:selected" ).text(); will give you the text that you selected in the drop down element. either way you can change it to .val(); to get the value of it . check the below coding
<select id="myId">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>`
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Try this
$('#your_select_element_id').val('your_value').attr().add('selected');

jQuery: unselect option in select element

I faced with a strange behaviour of select element. So, I have a select element with several options. One of option is empty - it's required by plugin to output placeholder.
I needed functionality that would clear selected options and I wrote something like:
$(element).val('');
$(element).find("option:selected").removeAttr("selected");
The thing is that "selected" attribute is still here and it's on old option - you can see it in the code sample.
So, I have 2 questions:
1) Why .val() method of jQuery library do not update "selected" attribute in options list?
2) Why I can not update "selected" attribute in my case? If I switch these statements it's working:
$(element).find("option:selected").removeAttr("selected");
$(element).val('');
Code sample:
$(function(){
$("#unselect").click(function(){
$("#lang_type").val('');
$("#lang_type").find("option:selected").removeAttr("selected");
alert($("#lang_type").html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_type">
<option value=""></option>
<option value="01">01 - Language of text</option>
<option value="02">02 - Original language of a translated text</option>
<option selected="selected" value="03">03 - Language of abstracts</option>
<option value="04">04 - Rights language</option>
<option value="05">05 - Rights-excluded language</option>
<option value="06">06 - Original language in a multilingual edition</option>
<option value="07">07 - Translated language in a multilingual edition</option>
<option value="08">08 - Language of audio track</option>
<option value="09">09 - Language of subtitles</option>
</select>
<button id="unselect">Unselect</button>
EDIT:
You can use prop(false) property like this
$(function(){
$("#unselect").click(function(){
$("#lang_type").val('');
$("#lang_type").find("option:selected").prop('selected',false);
});
});
Like #yezzz said, read this :
Note: Do not use removeProp() method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.
If I'm not mistaken, a multi-select can be initially unselected, but once any option is selected, it can not be unselected any more. RFC 1866 states in section 8.1.3:
The initial state has the first option selected, unless a SELECTED attribute is present on any of the elements.
This lets me to believe that one option MUST always be selected. Obviously, different browsers interpret this differently...
But it does not seem to be a jQuery issue, rather a browser implementation issue.
The selected attribute reflects merely the initial state of the select input. You shouldn't really care about removing it, as it affects nothing once a different option is selected (either by the user or by a script on your page).
The current state of the input can be read or modified via the selectedIndex property, where a value of -1 means no option is selected (which never is the default, as there always is an option selected initially). However, you seem to want to select a particular "empty" option.
Setting the value on a select box results in the corresponding option being selected, which, in your case, is the very first one.
The code probably does exactly what you want. So don't mind checking the HTML, as the selected attribute - again - is unrelated to the current state of the input.
The :selected selector, however, matches the elements that are currently selected. Your first snippet selects an option, thus making it :selected, then attempts to remove a non-existent attribute from it. The second snippet of yours assumes that the selection remains on the option that was initially selected, and then removes the attribute from it. What follows is the "empty" option getting selected, and no more steps need to be taken, as that's all it takes to select an option.
To summarize: you can safely drop all the code that deals with the removal of the selected attribute, as it doesn't affect the current state of the element, the state being already tied to the correct option.

Why does Angular not update the DOM by adding a 'selected' attribute to an <option> tag within ng-options when it correctly updates the model?

Using Angular 1.2.29 when I build a <select> with ng-options it appears on the surface to work as expected, when I select an option the model is updated, and visually the <select> indicates that the newly selected option has been chosen.
However, when using Developer Tools to view the mark-up I can see that the option tags are not updated, specifically the selected attribute is not removed from the previously selected option, nor is it added to the newly selected option.
<div data-ng-controller="MainController as main">
<pre> {{ main.test.item }} </pre>
<select
data-ng-model="main.test.item"
data-ng-options="item.label for item in main.test.items"
required="required">
<option value="" label="What do you want?"></option>
</select>
</div>
By setting the model this.test.item within the controller selected="selected" is added to the second option (with the label 'B'), however subsequent changes (made by using the select) do not update the mark-up accordingly.
angular
.module('myApp')
.controller('MainController', MainController);
function MainController () {
this.test = {};
this.test.items = [
{ label : 'A' },
{ label : 'B' },
{ label : 'C' }
];
// Pre-select the second item.
this.test.item = this.test.items[1];
}
It’s great that the model is kept up to date, but why does the mark-up remain unchanged?
What can be done to fix this so that it is updated to match the model?
https://jsfiddle.net/paulhhowells/4hmwhbe8/
Sorry, don't have enough reputation to post comments, apparently.
#paulhhowells I think the answer there still applies. To elaborate, the DOM has properties and attributes. Properties have the actual values that you care about, they'll update as you change the selection. What you're seeing when you see selected="selected" in the markup is the attribute selected. Attributes don't update as you change the selection, they exist in the markup to create the element, and are usually used to initialize the element's properites
EDIT: There's a better explanation in the jQuery documentation, take a look at the Attributes vs Properties section here.
The selected attribute should not be expected to be updated.
It is only used to indicate that the option it is on should be initially selected.
https://developer.mozilla.org/en/docs/Web/HTML/Element/option
Therefore, Angular does not update the DOM by adding a 'selected' attribute to an <option> tag within ng-options when it correctly updates the model, because it should not.

Cannot get ID data to display using Flat UI select box

I'm using Flat UI http://designmodo.github.io/Flat-UI/ as an Twitter Bootstrap extension to my site.
I'd like to be able to use the "select" box styling that they provide, which is:
<select name="huge" class="select-block mbl" id="fui-select">
<option value="0">My Profile</option>
<option value="1">My Friends</option>
</select
But I want to pass in a id value and which is created from a db, I dont want to use a pre fixed list as per the example.
I thought I could just do the following (adding myiddata to the select line)
<select name="huge" class="select-block mbl" id=" **myiddata** fui-select">
</select
But this is not returning the results. I cannot find an answer to this in the documentation provided.
Is the approach correct? or is there another way that I have to pass data into a select box?
#JohnKlakegg Is right, you can't have multiple id's (more specifically spaces in the id="" attribute. Remove the "fui-select" id and replace it with your desired id.
The JavaScript should be generating the dropdown component from the class ('select-block') and not the id attribute, so everything should work fine.
I hope this helps :)

Categories