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
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 creating a webpage that redirects users to a specific webpage.
Some part of the URL of the specific webpage is constant and the rest is a variable.
If the webpage is www.gotop.com/page1. www.gotop.com/ is constant every time but the page1 part changes. And I want to take the page1 part as an input in my webpage and then a button to go to www.gotop.com/page1
I tried a lot but failed. My final code is
<!DOCTYPE html>
<html>
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<body>
<h1>The button Element</h1>
<button type="button" onclick="window.location.href='http://152.158.53.1:2222/q/"name"/';">Click Me!</button>
<p>PLEASE WAIT...Redirecting to REALME 1 URL</p>
</body>
</html>
But it doesn't work.
Here I took the value of the variable part of URL from the input and concatenated it at the end of the constant part of the URL.
window.location.href redirects you to the desired URL.
This should help,
document.getElementById('button').addEventListener('click', function(e) {
const page = document.getElementById('val').value
window.location.href = `/constant/url/${page}`
})
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="val">
<button id="button">Click me!</button>
</body>
</html>
I think this would be a better solution
function loadPage(){
location.href = document.querySelector("#page_name").value;
}
<input type="text" id="page_name"/>
<button onclick="loadPage()">Go</button>
When the button is clicked, the loadPage function would be called. There, The value of the input is obtained and the page is redirected to that url.
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>
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>
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>