Multiple select not updating when value changed through javascript/jquery - javascript

I have a multiple select where each option has a class set to it.
Depending on the class i can pre-select all options with a specific class so the user doesn't have to select them all by himself.
So far it works fine, till to the point where i manually select one option by clicking on it. From this point on the pre-selects seem to don't work anymore. BUT only the visuals don't work anymore, the options still get the 'selected="selected"' applied to them. Also .val() on the select returns all values selected by the pre-selector. So in the background everything works fine, but the user can't see that it worked.
Here's my select:
<select class="form-control d-block w-100 col-8 col-xl-12" id="brand-select" name="brands" size="15" multiple>
<c:forEach var="brand" items="${brands}">
<option class='<c:choose>
<c:when test="${brand.isCompanyBrand()}">COMPANYBRAND</c:when>
<c:otherwise>FOREIGNBRAND</c:otherwise>
</c:choose>' value="${brand.brandCode}">${brand.description}
</option>
</c:forEach>
</select>
And here's one of the selectors:
selectCompanyBrands.addEventListener("click", function()
{
$("#brand-select option").attr("selected", false)
$("#brand-select option.COMPANYBRAND").attr("selected", true);
}, false);
I'm currently out of ideas what i can do to resolve this problem.

Read through this in jquery doc and I quote for specificity:
Attributes vs. Properties
The difference between attributes and properties can be important in
specific situations. Before jQuery 1.6, the .attr() method sometimes
took property values into account when retrieving some attributes,
which could cause inconsistent behavior. As of jQuery 1.6, the .prop()
method provides a way to explicitly retrieve property values, while
.attr() retrieves attributes.
Jquery, or rather its later versions, clearly distinguishes between attributes and properties. So the simple rule is that if you want to set a property (something that is related to a user action like a form element) use #prop() and otherwise use #attr().
Here you should be using #prop like this:
selectCompanyBrands.addEventListener("click", function() {
$("#brand-select option").prop("selected", false)
$("#brand-select option.COMPANYBRAND").prop("selected", true);
}, false);

Here is a sample working code to help you. I have used prop():
$(document).ready(function() {
$("select option").prop("selected", false)
$('select option.someclass').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" size="15">
<option class="someclass">some option</option>
<option class="someclass">some option</option>
<option class="newclass">some option</option>
<option class="someclass">some option</option>
<option class="someclass">some option</option>
<option class="newclass">some option</option>
<option class="newclass">some option</option>
<option class="newclass">some option</option>
<option class="someclass">some option</option>
<option class="someclass">some option</option>
<option class="someclass">some option</option>
</select>

Related

vJS or jQuery -- set / get simplified selected option

I'm having trouble getting and setting the "simplified" selected value of a select using jquery or vanilla js. i.e. <option value="foo" selected> vs. <option value="foo" selected="selected">.
Below only works if the option is selected like below, but all the programmatic ways to set the value of a select option I have tried result in <option value="value" selected="selected">. I need to set and get the simplified selected.
const sortBySelect = document.getElementById('sortBy');
let currVal = sortBySelect[sortBySelect.selectedIndex].value;
console.log(currVal);
<select id="sortBy">
<option value="title" selected>Title</option>
<option value="date">Date</option>
<option value="name">Name</option>
</select>
I've tried these and all the permutations I could find on Stack:
$(`#sortBy option[value='${storageValue}']`).attr('selected', true);
$(`#sortBy option[value='${storageValue}']`).prop('selected', "selected");
Instead of using attr() or prop() functions, just directly set the select value by using the val() function
$('#sortBy').val('${storageValue}');

HTML selection automatically selects first entry

I have the following code:
<select #typ class="input" (change)="changeIndex(typ.value)">
<option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>
If I start the application the selection has automatically selected the first option. But I don't want that. Why is this and how can I fix it?
Found a better answer here:
https://stackoverflow.com/a/13492609/5039495
We can use selected, disabled and hidden on the default option, this is recognized by safari.
<select>
<option selected disabled hidden></option>
<option>1</option>
<option>2</option>
</select>
Outdated
The trick is setting an empty option with display:none.
<select>
<option style="display:none"></option>
<option>1</option>
<option>2</option>
</select>
Warning: As reported by other users, this solution doesn't work in Safari and iOS Safari
This is a common thing... Just add an empty <option> as the first:
<select #typ class="input" (change)="changeIndex(typ.value)">
<option></option>
<option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>
You cannot have anything unselected for a <select> tag. This should fix it. Quoting from Turnip's comment: A select has to have a selected option. If you don't explicitly set one using the selected attribute the first will be used. For a better version, you can use the following code with selected attribute:
<select #typ class="input" (change)="changeIndex(typ.value)">
<option selected="selected" value=""></option>
<option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>

Toggling ng-selected

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.

Javascript - Plugin should not affect all select boxes

I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?
Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!
You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>
I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

Categories

Resources