I have select box and have default value is text "please select one", I need solution while if any other option is selected (eq. abc) and user need to clear what he has selected(important is getting default value selected again) with button("Clear and go Next") event.
http://plnkr.co/edit/HIOOHBHaibHmDtiLdGfh?p=preview
<select ng-model="item" ng-options="item.name for item in options"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
I'm not entirely sure what you're asking, but if you need to clear the selected value, you can do something as simple as:
HTML
<button ng-click="reset()">Clear and move Next</button>
JS
$scope.reset = function() {
$scope.item = "";
}
Plunk
Related
I have a multiple select options and select all button. When clicked on select all button then all options should get highlighted. However, in my case when clicked on select all button then I am getting all the options as selected and it's values but the options are not getting highlighted.
Here's my controller code.
$scope.selectedAll = function(){
$scope.user.profile = [];
angular.forEach($scope.userprofiles, function(item){
$scope.user.profile.push( item.profile);
});
}
HTML:
<div class="label_hd">Profiles
<input type="button"
id="select_all"
ng-click="selectedAll()"
name="select_all"
value="Select All">
</div>
<select multiple
class="browser-default"
name="userprofile"
id="userprofile"
ng-model="user.profile">
<option ng-repeat="profile in userprofiles"
value="{{profile.profile}}">
{{ profile.profile_name }}
</option>
</select>
Here is a fiddle: https://jsfiddle.net/MSclavi/zybnjpot/12/
You were on the right path. Instead of using a ng-repeat with your options, use ng-options. Here is the documentation https://docs.angularjs.org/api/ng/directive/ngOptions. Good luck
I have a dropdown which uses ng-options (angular).
I have a default option selected with an empty value. (so it has the "selected" attribute and same value as the model)
Whenever I add another element to the ng-options, which is not empty, if the model has an empty value (which is pointing to the default empty option), the new added option is automatically selected.
The value of the model is still empty, but the dropdown now shows the new added option automatically.
I've also tried to make the default option be " " instead of just "", but it still does the same change.
Any way to guarantee new added options are not automatically selected?
`<select class="form-control section" ng-model="action.prop">
<option value="" disabled selected>Select Property</option>
<option ng-repeat="prop in tr.props| orderBy:prop.name"
value="{{prop.name}}"> {{prop.name}} </option>
</select>`
Try this :)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
<p>{{selectedName}}</p>
<button ng-click="add()">add</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [""];
$scope.selectedName = $scope.names[0]
$scope.add = function() {
$scope.names.push("new");
}
});
</script>
</body>
</html>
You can simply just set your ng-model in the controller to the following before running your get dropdown function. This way it will always be set to default.
Controller
$scope.action = {};
$scope.action.prop = '';
Even though Roth's solution would work well in my case.
So would Nishant's if I used ng-options and a filter.
I decided instead, on the ng-repeat, to have an ng-if="prop.name != ''".
Since what was happening for me was that for about a second, ng-repeat would have latest prop with empty name for a second, and as ng-model = "", it was setting that option as selected.
<select class="form-control section" ng-model="action.prop">
<option value="" disabled selected>Select Property</option>
<option ng-if="prop.name != ''" ng-repeat="prop in tr.props| orderBy:prop.name"
value="{{prop.name}}"> {{prop.name}} </option>
</select>
I have the following code
<select class="needsclick" id="country" name="order[country]">
<option value="USA" selected="selected">USA</option>
<option value="CANADA">CANADA</option>
</select>
I could do the following javascript command to change the option value
document.getElementById("country").value = 'CANADA'
however, this does not change the selected value and does not change the state box to province.
When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)
I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?
If I do the following after changing the value
document.getElementById("country").click()
it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)
How can I achieve this using a javascript command like the two above?
The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.
I can do the following code but it still does not change the state box to province (only if physically clicked)
document.getElementById("country")[1].selected = true
To work with the option elements within a select, you must access the options node list and then select one to work with.
Setting the value is separate from setting the selected flag.
var countries = document.getElementById("country");
var states = document.getElementById("provincesUSA");
var territories = document.getElementById("provincesCanada");
countries.addEventListener("change", function(e) { update(e); });
function update(e){
// show the correct sub-list based on the selected option
var country = countries[countries.selectedIndex];
if(country.value === "USA"){
states.classList.remove("hidden");
territories.classList.add("hidden");
} else if(country.value === "CANADA") {
territories.classList.remove("hidden");
states.classList.add("hidden");
} else {
territories.classList.add("hidden");
states.classList.add("hidden");
}
}
// To dynamically choose
document.querySelector("button").addEventListener("click", function(){
countries.options[2].selected = "selected"; // Canada
// Simulate the change event
update(countries);
});
#provincesUSA.hidden, #provincesCanada.hidden { display:none; }
<select class="needsclick" id="country" name="order[country]">
<option value="" selected="selected">Choose A Country</option>
<option value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
<select id="provincesUSA" class="hidden" name="states">
<option value="al">Alabama</option>
<option value="ar">Arkansas</option>
</select>
<select id="provincesCanada" class="hidden" name="territories">
<option value="on">Ontario</option>
<option value="qu">Quebec</option>
</select>
<button>Force A Selection (click me whe CANADA is NOT selected)</button>
document.getElementById("country").selectedIndex = 2;
I would like to watch on select tag with ng-repeat and disable the save button.I have a set up like this.
Initially i will have three select boxes with values, where user has to select at least one select value out of three boxes to get Save btn enabled
user will also have a provision to add more select boxes.
Now,how do i watch the select boxes,if we have 5 select boxes -how can we watch all of them and enable/disable the Save button ,if none got selected.
Here is a fiddle link..similar to my situation: Js fiddle
Please help me!!
Well, you can put all the selects inside a form and set them as required.
In the button, you valid the ng-disabled tag if de form is $invalid.
Example:
<ng-form name="selectForm">
<select class="form-control" ng-model="item.name" name="select" ng-required="true">
<option>Select a campus</option>
<option>Campus 1</option>
<option>Campus 2</option>
<option>Campus 3</option>
</select>
<button type="submit" ng-disabled="selectForm.$invalid">Save</button>
</ng-form>
You can use the same object as model for all ng-selects:
$scope.selectedValues = {};
Then each select box inside ng-repeat will use as model different object property:
<select class="form-control" ng-model="selectedValues['campus_' + $index]">
<option>Select a campus</option>
<option>Campus 1</option>
<option>Campus 2</option>
<option>Campus 3</option>
</select>
To check whether all values are filled you'll watch the selectedValues for changes with last parameter set to true:
$scope.$watch('selectedValues', function(newValue, oldValue) {
// Check whether all values in $scope.selectedValues are filled
var allFilled = true;
angular.forEach($scope.selectedValues, function(value, key) {
if (!value) {
allFilled = false;
}
});
if (allFilled) {
// enable button
} else {
// disable button
}
}, true);
The last parameter true is essential because it tells Angular to compare all values in the object. See https://docs.angularjs.org/api/ng/type/$rootScope.Scope.
In my database there's a column, name is Sequence & it consist of numbers(int). In my application's edit function I need to show that selected number in my jQuery dropdown list.
In my AJAX call I sent ProductId and get the specific row.
Html Control
<select class="form-control" id="drpsequence"></select>
My jQuery dropdown
$("#drpsequence option:selected").append($("<option></option>").val(msg._prodlng[0].Sequence).text(msg._prodlng[0].Sequence));
In the above code msg._prodlng[0].Sequence comes as selected number
I'm not sure what you are trying to do but it looks like you are adding an <option> tag into another <option> tag which is most likely not what you want.
If the returned value already exists as a selected option:
$("#drpsequence").val(msg._prodlng[0].Sequence).prop('selected', true);
Or, if you need to add an option:
var opt = $("<option>")
.val(msg._prodlng[0].Sequence)
.text(msg._prodlng[0].Sequence);
$("#drpsequence").append(opt);
Snippet example:
// foo --> select
$('#foo').val('baz').prop('selected', true);
$('#bim').click(function(){
$('#foo').append('<option id="boop" value="boop">boop</option>'); //<-- or loaded value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
<option>-- select --</option>
<option id="bar" value="bar">bar</option>
<option id="baz" value="baz">baz</option>
</select>
<button id="bim">Add an option</button>
You need to do one of following.
Either find that option and make that selected = true like this.
$("#sel option").each(function(i) {
if ($(this).val() == "Orange") $(this).attr("selected", "true");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</select>
Or if that option is not found then add and make that selected = true.
Like the one, which you had in your question.