Is it possible to select multiple options from ng-options or have ng-options values as check boxes? If possible can someone give me an example please?
To create a multiple select just add multiple to your select tag
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("myApp", []);
app.controller(
"myCtrl",
function($scope){
$scope.values=[
{value:"0", text:"zero"},
{value:"1", text:"one"},
{value:"2", text:"two"}
];
}
);
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>Choose:</div>
<select name="choose" ng-model="choose" multiple>
<option ng-repeat="x in values" value="{{x.value}}">{{x.text}}</option>
</select>
</div>
</body>
</html>
Related
I want to add value to option based on text in option field.
Here is code:
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
jQuery code itself is to automatically add the 'value' attribute and value based on the text
<select id="select_1">
<option value="0930">09:30</option>
<option value="1000">10:00</option>
<option value="1130">11:30</option>
</select>
It's possible?
Yes, this is possible,
To test it, run the code snippet and change the select list.
$("#select_1 > option").each(function() {
this.value = this.text.replace(':', '');
});
$("#select_1").on('input', function() {
alert(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
Inspect in chrome seem like this
Try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
</body>
<script>
$(document).ready(function() {
$("option").each(function(index) {
$(this).attr("value", $(this).html());
});
});
</script>
</html>
I am using the following code in my project. I have a select element in my angular js project. for options iam passing the json values using ng-repeat. but for ng-selected, I want to show the JSON first value.
I tried two options but it doesn't work for me.
If anyone knows how to fix this please let me know.
My HTML code( option one and two):
<select select2 id="environment" name="authorization" ng-model='addNlpStepForm.restfulEntity.authorization' class="md-form-control">
<option ng-repeat="(key,value) in authorizationtype" value="{{key}}"
ng-bind="value" ng-selected="addNlpStepForm.restfulEntity.authorization == 1">
</option>
</select>
<select select2 id="environment" name="authorization" ng-model='addNlpStepForm.restfulEntity.authorization' class="md-form-control">
<option ng-repeat="(key,value) in authorizationtype" value="{{key}}"
ng-bind="value" ng-selected="key == 1">
</option>
</select>
My JSON code:
AUTHORIZATION_TYPES = {
1 : "None",
2 : "Basic",
3 : "Bearer",
};
This is what i did in my code when i wanted to display a json list by using ngFor, I tried to implement it on your example! Hope is works:
<select formControlName="type">
<option *ngFor="let type of AUTHORIZATION_TYPES" [ngValue] ="type.key"> {{type.value}} </option>
</select>
*** I also use the reactive-form approach
Please check this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.AUTHORIZATION_TYPES = {
1 : "None",
2 : "Basic",
3 : "Bearer",
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select select2 id="environment" name="authorization" class="md-form-control">
<option ng-repeat="(key,value) in AUTHORIZATION_TYPES" value="{{key}}"
ng-bind="value" ng-selected="key == 1">
</option>
</select>
</body>
</html>
The HTML file that am using is below:
<label for="lfiles">LFILES</label> <select class="chosen-select"
data-placeholder="Select Files" chosen multiple
ng-model="upgradepatch.lFiles" options="bscPatchFiles"
ng-options="list for list in bscPatchFiles"></select>
<input type="button" value="Upload" ng-click="ButtonClick()" />
<span ng-bind="Message"></span>
The controller.js file is below:
$scope.loadSWFiles = function(){
$http.get('showDirectories.do?id='+$scope.bscId).success(function(data) {
$scope.bscPatchFiles=data;
});
}
$scope.ButtonClick = function () {
$scope.Message = "Patch Upload."
console.log('ButtonClick');
}
Below is the example in which you can select multiple options from dropdown by pressing the shift command and the option you want to select simultaneously.
var app = angular.module('role', []);
app.controller('fooController', function($scope){
$scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}];
$scope.user = {};
$scope.user.roles = [ {id:1, name:"Administrator"} ];
$scope.ButtonClick = function() {
console.log($scope.user.roles);
};
});
<html>
<head>
<script data-require="angular.js#1.3.5" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="role" data-ng-controller="fooController">
<select multiple class="form-control"
data-ng-model="user.roles"
data-ng-options="role.name for role in roles track by role.id"
required=""></select>
<input type="button" value="Upload" ng-click="ButtonClick()" />
</body>
</html>
This is how we select multiples from dropdown (Press shift button to select multiple) with and without ng-options and bind it with controller.
(function(angular) {
'use strict';
angular.module('staticSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
multipleSelect: []
};
$scope.ButtonClick = function() {
alert($scope.data.multipleSelect);
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - multiSelect</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="staticSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="multipleSelect"> Multiple select: </label><br>
<select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select><br>
<tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
<input type="button" value="Upload" ng-click="ButtonClick()" />
</form>
</div>
</body>
</html>
I want to enter a combobox a number and that automatically I paint the amount of combobox in the web page, can someone help me with some tutorial?
In the combobox if I insert 5 I want it to be generated in another div automatically 5 combobox in which I will receive an integer. And if I insert 0 do not want anything to be generated, an example is on the following page
http: //www.pricetravel .com.mx /
In the hotels section if you enter a number greater than zero, the fields are automatically generated
I have written a Jquery code to fulfil your requirement.
$(document).ready(function() {
$("#cbo-select").change(selectedElementChanged);
});
function selectedElementChanged() {
var selectedValue = $("#cbo-select").val();
if (parseInt(selectedValue)) {
$("#area").empty();
for (var i = 0; i < selectedValue; i++) {
$("#area").append('<select><option>test</option></select></br>');
}
}
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<select id="cbo-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="area">
</div>
</body>
</html>
I want to set a default text on dropdown menu which is disabled and can not let users select.
<select kendo-drop-down-list style="width: 28rem;">
<option selected="selected" disabled="disabled" >State</option>
<option>Azerbaijan</option>
<option>Belarus</option>
</select>
The problem is when I set selected and disabled it doen not show state option in dropdown menu. Can someone help me out.Thanks in advance
Update
The issue here is being caused by the use of the Kendo DropDownList component, which when instantiated is going to remove any disabled elements from the collection of items in the list.
Since Kendo doesn't support this behavior, you can implement it yourself using the following hack that involves explicitly disabling that option after instantiating the component :
<select id='state' kendo-drop-down-list style="width: 28rem;">
<option>State</option>
<option>Azerbaijan</option>
<option>Belarus</option>
</select>
<script>
$(function(){
// Instantiate the drop down
$('#state').kendoDropDownList();
// Explicitly disable the first element
$("#state_listbox .k-item")[0].disabled = true;
});
</script>
You can see a working snippet of this below :
<!DOCTYPE html>
<html>
<head>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Kendo Snippet Example</title>
</head>
<body>
<select id='state' kendo-drop-down-list style="width: 28rem;">
<option>State</option>
<option>Azerbaijan</option>
<option>Belarus</option>
</select>
<script>
$(function(){
$('#state').kendoDropDownList();
// Explicitly disable the first element
$("#state_listbox .k-item")[0].disabled = true;
});
</script>
</body>
</html>
Original Response (Not Pertaining to Kendo)
Have you tried setting the placeholder attribute to "State"?
<select kendo-drop-down-list style="width: 28rem;" placeholder='State'>
<option selected disabled="disabled" >State</option>
<option>Azerbaijan</option>
<option>Belarus</option>
</select>
which would set the default display text to "State", however it would not allow it to explicitly be selected afterwards :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<select kendo-drop-down-list style="width: 28rem;" placeholder='State'>
<option selected disabled="disabled" >State</option>
<option>Azerbaijan</option>
<option>Belarus</option>
</select>
</body>
</html>
Additionally, if the issue is due to Kendo-related styles being applied to the element, you can explicitly set this default "placeholder" by using the optionLabel attribute when instantiating your Kendo Dropdown :
$('[kendo-drop-down-list').kendoDropDownList(){
/* Other configuration here */
optionLabel: 'State'
}
I am a bit confused on what you mean. When I tested the code, it did display the "State" option, which is what it sounded like you want.
if you don't want the state to appear in the drop down as an option, try this:
<select kendo-drop-down-list style="width: 28rem;">
<option selected="selected" disabled="disabled" style="display: none;">State</option>
<option>Azerbaijan</option>
<option>Belarus</option>
</select>
here is a fiddle