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>
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>
How can i upgrade my select tag with additional options that can be added by a user?
F.E:
<select id = "sport">
<option value = "football"> football </option>
<option value = "volleyball"> volleyball </option>
<option value = "rugby"> rugby</option>
</select>
I need there a additional text input where a user can add new option to the select tag,
If user write an another type of sport i would like to have that sport permament as a option in my select tag.
Regards,
Take a look to the Select2 library and the "Dynamic option creation"
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true,
});
</script>
Hope this helps :)
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 have used bootstrap-select.min.js to search in dropdown. But it gives wrong result. My html code looks like below :
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
When I write te than it show Elite, Interp and test instead of test.
If I write te than it show only test. SO what should I have to change in my code?
This code snippet shows that your code is working:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
Try this, it works as you expected.
I had a similar problem. My search-result for liveSearchStyle "startsWith" was always empty for each search-value. After a while I've figured out, that this was an mapping issue. This is how it worked for me:
<abp-select
picker-options.bind="{ liveSearch: true, dropupAuto: false, noneSelectedText: '', liveSearchStyle: 'startsWith' }"
collection.bind="items"
selected-item.bind="selectedItem"
data-mapping-structure.bind="{ option: 'standardDisplayText', content: 'standardDisplayText' }"
object-key="key">
</abp-select>
export interface IItem {
key: string;
value: string;
displayText: string;
}
public items: IItem[];
public selectedItem: IItem;
items = [
{ key: '121', value: 'hello', displayText: '121 - hello' },
{ key: '112', value: 'world', displayText: '112 - world' },
];
search for: "12"
result: "121 - hello"
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