I am trying to integrate Select2 within a Marionette ItemView.
The problem: I want to initialize the Select2 with already-selected values, but the selected elements are still available in the dropdown. If I clear the box then manually reselect the items from the dropdown, the items are then properly removed from the dropdown.
Javascript:
View.Profile = Marionette.ItemView.extend({
template: profileTpl,
onShow: function(){
var $select = this.$("#categories"); // grabs the element for Select2
$select.select2(); // build the Select2 element
$select.select2("val", ["american", "french", "italian"]); // select values
}
HTML:
<select id="categories" data-placeholder="Add a category..." multiple class="form-control" tabindex="8">
<option></option>
<option value="american">American</option>
<option value="french">French</option>
<option value="italian">Italian</option>
<option value="indian">Indian</option>
</select>
I can do this on a single html example page with no trouble.
Using Marionette's onShow, the "tag" elements correctly displayed in the Select2 box, but when I click the box to select different options, all options are still available.
I suspect there is some event not properly attached to the Select2 element because of the way I'm attaching the Select2 element in the onShow event.
Here is working example of your issue.
Just one note related to your code. It's a good practice, when accessing an element of view, use this.$el.find('selector') reference instead of querying it via jquery $('selector').
You can do it even shorter like this.$('selector').
Related
I'm using select2 jQuery plugin to make fancy my select boxes. If I update the base select field by jQuery the select2 item does not updated. Is there any way to the select2 to listen the original select field changes and then update itself?
Here is my HTML code:
<select name="myselect" id="myselect">
<option value=""></option>
<option value="a">A</option>
<option value="b">B</option>
</select>
Default the first option (the empty one) will be selected. And here is my jQuery code:
$('select').select2(); // this line is running first always
// and there is no way to change the order
$('#myselect').val('a'); // this line is run after select2 built
// his elements
Is there any way to update the select2 element automatically?
Found the solution (just the documentation not call it "update"):
$('#myselect').val('a').trigger('change');
I'm facing an issue in selecting the dropdown first value after selecting it for the first time. When the dropdown options slidedown to select, the first value would be selected by default,bcoz of which I'm not able to select the first value. I'm using JQuery mobile framework and I'm writing custom JS to change the dropdown. I need to handle this dropdown only using custom JS and cannot make the dropdown work with this custom logic due to some other issue with my project.
Here first value im referring as 'US' from dropdown
The solution for this issue would be really appreciated. Thanks in advance.
HTML:
<select id="drpDwn">
<option value="" disabled="disabled">select</option>
<option value="US">US</option>
<option value="AU">AU</option>
<option value="NZ">NZ</option>
</select>
JS:
$(document).on('change', '#drpDwn', function () {
var index = $(this)[0].selectedIndex;
$(this).attr('selectedIndex', index);
$(this).find('option').removeAttr('selected');
$(this).find('option').eq(index).attr('selected', 'selected');
$(this).siblings('span').html($(this).find('option').eq(index).text());
});
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css
Check out this JSFiddle
The difference maker was modifying:
$(this).find('option').removeAttr('selected');
Into:
$(this).find('option:not(:selected)').removeAttr('selected');
When 'change' was triggered, the selected attribute is added to the new option, so you were stripping it away from everything even the new selection. That's why the option never changed.
Using :not(:selected) came in handy then since it will only strip away the attribute from things that weren't the current selected option.
<select ng-model="myModel" id="searchAsset" class="search">
<option ng-repeat="asset in assettype" ng-click="assetclick()" value="{{asset}}"></option>
</select>
<select class="search" id="searchLevel">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
While performing some logic on second dropdown, I want to fetch the selected value of the first dropdown or vice-versa. How can I do this?
I tried using $("#searchLevel").value and $("#searchLevel option:selected").text()
The direct answer to this question is to use the .val() method for jQuery like so:
var selectedVal = $("#searchLevel").val();
However, the slightly less direct, but true answer is that you should not be doing anything like this in an angular app - changes in the dom should only be affecting your view model.
When your using angular, jquery is really not required.
As per your code, The first select menu value will be stored in the ng-model attribute value i.e. myModel.
In your second select menu, specific the ng-model as well. You can just fetch the value of the drop down menu by calling ng-model name.
<select class="search" id="searchLevel" ng-model="secondSelect">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
For example,
If you want to access the value inside your controller on change event, then
$scope.changeEventhandlerForFirstSelect = function() {
// $scope.myModel will contain the value
}
Similarly, for second select menu $scope.secondSelect will give that value.
try
$("#searchLevel").val();
with: $("#searchLevel option:selected").text() you get the text not the value.
I'm banging my head against the wall on this one.
I have an array of objects that will be used to populate a select drop down:
CardCount = [{"ClientId": "0010", "Description": "0010 (206 Members)"}, {"ClientId": "0051", "Description": "0051 (1 Member)"}, ........]
When I attempt to use ng-options, the value of the option is set to the index, not to the ClientId as desired. To get the value in each option to be the ClientId, I have to use a ng-repeat in the options. Here is my html:
<select ng-model="CurrentClient">
<option ng-repeat="item in CardCount" value="{{item.ClientId}}">{{item.Description}}</option>
</select>
Initially, all is well, the select and options are generated correctly, and the first option is correct. Now, when a certain button is clicked somewhere else on the page, it becomes necessary to recreate this select and options with a smaller array of similar objects. However, doing so creates a blank option with a value of "? string:0010 ?". This is the option that is selected. Again, I cannot use ng-options to correct this problem because doing so doesn't set the value attribute in the option tags correctly. So, I added this to the option tag:
<option ng-repeat="item in CardCount" value="{{item.ClientId}}" ng-selected="CurrentClient == item.ClientId">{{item.Description}}</option>
Now, that does mark the correct option as selected. However, the drop down still shows the blank option. Here's the rendered html:
<select ng-model="CurrentClient">
<option value="? string:0010 ?"></option>
<option value="0010" selected="selected">0010 (206 Members)</option>
</select>
As you can see, it sets the correct option to selected. However, it sets it to selected="selected", and not just selected. When I inspect element and change selected="selected" to selected (remove the equals and everything after it), the drop down then correctly displays the correctly selected option.
Again, initially the select and options work great. The problem seems to happen only after the array that the select is created with is changed. How can I get this select and options working correctly after I change the array, and not show that first blank option?
Thanks!
Changed you option element to set value by default.
<option ng-repeat="item in CardCount track by item.ClientId"
value="{{item.ClientId}}">{{item.Description}}</option>
Hope this could help you. Thanks.
ng-options is definitely the way to go:
<select ng-model="selected.ClientId" ng-options="it.ClientId as it.Description for it in clientList">
<option value="">-</option>
</select>
I'm using AngularJS with AngularStrap (directive Select, based on Bootstrap-Select made by Silvio Moreto). I have the next problem:
I have an array of car brands. Using ng-options, I put them like options in a select.
By other way, when I select an option (car brand), I get the different models of this car brand, and show them like options in another select.
The problem is when I'm using the AngularStrap directive select, it doesn't work well. The first time i select a car brand, it works fine, but the next selected option (car brand), it shows the models of the car brand selected and the first model of the previous car brand selected.
When I don't use AngularStrap select it works well, therefore i think the problem is in AngularStrap select.
Thanks for your help.
My code is the next:
HTML:
<select ng-model="selectBrand" ng-options="carBrand.id as boatBrand.name for boatBrand in boatBrands" bs-select >
<optionvalue="">CarBrand</option>
</select>
<select ng-model="selectModel" ng-options="carModel.id as carModel.name for boatModel in carModels" bs-select>
<option value="">CarModel</option>
</select>
Controller (JS):
$scope.carBrands = carBrand.query();
$scope.$watch('selectBrand', function() {
$scope.carModels = carModel.query({type_id: $scope.selectBrand});
};
I realize this is old, but I had a similar problem with the Chosen Select plugin and a dynamic list of ng-options. I finally resolved the problem by wrapping my options query inside of a $timeout.
$timeout(function () {
$scope.carModels = carModel.query({type_id: $scope.selectBrand});
});
The only way I was able to use the AngularStrap select support with a select element was to use ng-options and have no option elements as children of the <select>.