Develop Reference

Pass currently selected list item from bootstrap plugin selectpicker into JS

I'm new to JS, I'm trying to access a selected value from a select list using the selectpicker plugin from bootstrap.
Currently my code gives me the entire list rather than just the currently selected item.
<div class="form-group">
<select class="selectpicker" name="applicationSelect">
<option value="1">app 1</option>
<option value="2">app 2</option>
<option value="3">app 3</option>
</select>
</div>
Then in my script.js file I have:
var appName = $('select[name=applicationSelect]').val(1).text();
The retrieved value will then be based onto an Ajax event, but I'm struggling to find a working example doing what I'm trying to do.
How do I retrieve only the currently selected item?

This should do the trick:
$('select[name=applicationSelect]').val()
If you specify val() with a parameter, you are actually setting the value. Without parameters, the method will just return the current value.
You can find more information here.

Get rid of blank entry in select tag

I have a number of items that get their data from a Json object and populate it using angular.
<select ng-model="MyCtrl.cargoList">
<option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>
And whenever I load the form, I get something like this in my console:
<select ng-model="MyCtrl.cargoList">
<option value="? object:25 "?></option>
<option value="">Gloves</option>
<option value="">Jacket</option>
<option value="">Shoes</option>
</select>
I can get the values to appear just fine, but I can't seem to get rid of the very first option. I don't mind the select box showing the very first element in the list, but I don't want it to be a blank line. How do I get rid of it?

You need to select 1st option by default on ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model name should not be same as that of your cargoList.
Markup
<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
<option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>
Demo Plunkr

Use ngOption <option>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
I have used following expression
label for value in array
HTML
<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList">
</select>
and In your controller set model value as first element of list
this.cargo = this.cargoList[0]
Also note: You can use MyCtrl.cargoList as model as well as array So you should use another variable to hold the model value.

Use ng-options instead of ng-repeat
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>
You can fine tune the labels/values further if you like, check the documentation here - https://docs.angularjs.org/api/ng/directive/ngOptions
You can ng-init, or set the first value to defualt, something like
MyCtrl.selectedListItem = MyCtrl.cargoList[0]
So if you want a function to detect you have changed the value of the select you would use ng-change like so :
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>
In your controller
$scope.selectChanged = function(){
//apply your logic
};

multiselect dropdown sorts based on value present in option tag

I am having a multiselect dropdown whose value are populated based on iteration through for each. However the order I am sending the data is not maintained.
Please suggest what should I do.
<select id="secWhse" path="secondaryWarehouse" multiple="true" style="display: none;"
title="Select the secondary warehouse to which you want to give access to the user.">
<option value="1">Enterprise</option>
<option value="14">enter2</option>
<option value="17">enter3</option>
<option value="19">4thenterprise</option>
</select>
But if I am able to print the value directly, Its printing in my order.
UPDATE: Plugin we are using is: http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select
CODE:
$('#secWhse').multipleSelect({ filter: true,multiple: true});
JSP code to populate select tag:
${item.value}

cascading drop downs in angular

I am trying to get some cascading drop downs in angular that populate based off of what the previous drop down has selected. So basically there are 5 drop downs total, at first only the first drop down would be populated, and then the second one would populate based off of what is picked in the first (hopefully using $http to get the new info back form server base don what is picked) and so on all the way down to 5.
So basically I have this :
<select class="selectScope" ng-model="scope1">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel1" ng-model="scope2">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel2" ng-model="scope3">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel3" ng-model="scope4">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel4" ng-model="scope5">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
I will have populate the first dropdown with an $http, but without going into detail I am just wondering if I can have the dropdowns trigger off each other. If i have selected all the way down to level 5 and I re-select level 3 - then 4 and 5 would empty (4 would re populate based on what was picked in 3). SO I just want them to work off each other. I am wondering if something like this is possible in angular. Apologies if this is a bit oblivious, I am brand new to using angular. Thanks!!

Firstly, you should be using ng-options instead of an ng-repeat
<select ng-model='scope1' ng-change='scope1Change()'
ng-options='obj.id as obj.name for obj in array'>
</select>
Then, on the ng-change event of the select, you can load the appropriate data for the following selects.
$scope.scope1Change = function() {
//Build URL based on selection
$http.get(myUrl).then(function(data){
//transform data if required
$scope.array2 = data;
});
}
You can keep the other select statements disabled based on previous values being selected
<select class="selectLevel1" ng-model="scope2"
ng-options='obj.id as obj.name for obj in array2' ng-disabled='!scope1'>
</select>
You would need some additional logic in the change events to work out whether or not you should clear the $scope model values as required, but that is pretty straightforward

Select model according to brand drop down

i have two drop down boxes
the first drop down contain the mobile brands
and other contains the mobile models
i want them to work like when in first drop down a brand is selected
the second drop down will show models of that particular brand i want to do it with javascript
the drop down values are static values
how i can do that?
<select name="brand">
<option value="samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select>
<select name="model">
<option value="Galaxy">Galaxy</option>
<option value="N8">N8</option>
</select>
The Drop down will be like the above ones

Use ajax record on the first celect box change and fill it in the second select box. Jquery ajax will function will send data to a function which will fetch data from database .