I implemented kendo but i want to keep the place holder by default like select planets should be displayed on default.
But the options are displaying by default as seen in the below example when i remove the options the place holder is displaying properly.
But my aim is to achieve to display the place holder by default and also increase the place holder size. Thanks in advance.
<!doctype html>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="example" role="application">
<div id="tshirt-view" class="demo-section k-content">
<h4 style="margin-top: 2em;">Solar System</h4>
<select id="size" placeholder="Select Planets..." style="width: 220px;" >
<option />Mercury
<option />Venus
<option />Earth
<option />Mars
<option />Jupiter
<option />Plutz
</select>
</div>
<script>
$(document).ready(function() {
// create ComboBox from input HTML element
// create ComboBox from select HTML element
$("#size").kendoComboBox();
var select = $("#size").data("kendoComboBox");
});
</script>
</div>
</!doctype>
Per the Kendo documentation for combo box:
$("#combobox").kendoComboBox({
placeholder: "Select..."
});
try adding another default option
<option value="" disabled selected>Select Planest...</option>
Related
I am trying to implement an autocomplete dropdown menu on our wordpress site. The functionality should be as follows:
Input box where user can start typing, then once they make a selection from the list, specific content is displayed.
I have it figured out with the functionality of returning the content related to the user selection. (code below)
<script>
jQuery(function($){
$('.group').hide();
$('#option0').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
</script>
<select id="selectMe" class=".dropdown">
<option value="option0">Select Your Brand</option>
<option value="option1">Brand A</option>
<option value="option2">Brand B</option>
<option value="option3">Brand C</option>
<option value="option4">Brand D</option>
</select>
<div id="results">
<div id="option0" class="group">
Generic content as a placeholder until selection is made.
</div>
<div id="option1" class="group">
Content related to Brand A.
</div>
<div id="option2" class="group">
Content related to Brand B.
</div>
<div id="option3" class="group">
Content related to Brand C.
</div>
<div id="option4" class="group">
Content related to Brand D.
</div>
</div>
I'm brand new to any type of javascript or jquery and I am unsure how to make it so they can start typing a word in an input field to show available selections rather than scrolling through a long list in a dropdown menu to find to what they're looking for. (there will be over 200 possible selections in the dropdown)
UPDATE:
I've figured out the autocomplete part by using jquery autocomplete ui
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"Burger King",
"Chick-Fil-A",
"Chipotle Mexican Grill",
"Dunkin'",
"McDonald's",
"Panera Bread",
"Sonic",
"Subway",
"Starbucks",
"Wendy's"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Search your brand: </label><br><br>
<input id="tags" placeholder="Start typing...">
</div>
<div class="results">
This is where I would want the content based on user selection to be shown.
</div>
</body>
</html>
I went through the autocomplete events but don't understand where I'd put any additional code to show content related to what the user selects in another div.
Any help with this coding would be appreciated!
I'm trying to display a piece of styled text below a dropdown using the change function, the problem is the option that triggers the change is the first option when the page loads, and because it's disabled (which it needs to be), there is no way to change to it
Instead, I'm wondering if there is an alternative to change that loads the function when the page loads
Just to be clear, the text should not be visible when any other value is selected from the dropdown
I'm also struggling with assigning a class name to the printed text, I have commented out what I thought should work
Days of numerous different code examples, and although I'm closer than a few days ago, I still can't figure out the proper way
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#reports').change(function() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
});
});
</script>
</body>
</html>
The desired result is have the "styled" text appear when the page loads, but disappear when any other option from the dropdown is selected
add onchange="hide()" to <select...> and add div with text in body and after change just hide it.
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports" onchange="hide()">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<div id="msg">"Choose Report From Menu"</div>
<script type="text/javascript">
function hide() {
msg.style.display='none';
};
</script>
</body>
</html>
If you're trying to execute that function one time when the page loads, try something like this:
$(document).ready(function () {
function reportsChange() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
}
$('#reports').change(function () {
reportsChange();
});
reportsChange();
});
This will execute the "reportsChange" function once when loading the page, and it will also be available for you to use whenever the on change event triggers.
I want to implement drop-down list with multiple group selection checkbox. There are a lot of options,so I use mysql to save them. How could i get data from mysql to use as option.I want to use php to retrieve data and they must be hierarchical tree structure.
I use this sample code, but option value is directly entered. How to make it display herarchical form as image below.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-
typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/css/bootstrap-multiselect.css" />
</head>
<body>
<div class="container" style="width:400px;">
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control">
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#framework').multiselect({
nonSelectedText: 'Thêm khách mời',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth: '400px'
});
});
</script>
Sorry for my bad English and Thanks for reading.
I would like a link to select a specific option of a select statement without having to select it first. Just to be clear, I am not trying to have one button/link trigger whichever option has been selected before, I want multiple links trigger one select option each as an alternative to using the drop-down itself.
If we take the following code e.g., how would I trigger the "away" option by this link?
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option value="home">Home</option>
<option value="away">Away</option>
</select>
</div>
<a href="#away">
<img src="http://via.placeholder.com/100x100">
</a>
You should listen for a click on the #away element and change the value of the select field accordingly. Something like this:
$(document).on("click", "#away", function(){
$("select").val("away").change();
});
Here is a working example
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
.wrap > .icon:last-of-type{
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#away", function(){
$("select").val("away").change();
});
});
</script>
</head>
<body>
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option value="home">Home</option>
<option value="away">Away</option>
</select>
</div>
<a href="#away" id="away">
<img src="http://via.placeholder.com/100x100">
</a>
</body>
</html>
You can use this handleSelect method on multiple link with proper option value.
function handleSelect(option) {
var optionElm = document.getElementById(option);
if(optionElm) {
optionElm.selected = !optionElm.selected;
}
}
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option id="home" value="home">Home</option>
<option id="away" value="away">Away</option>
</select>
</div>
<a href="#away" onclick=handleSelect("away")>
<img src="http://via.placeholder.com/100x100">
</a>
For some reason I am not able to get Selectize.js working on my project at all. I have checked all the jQuery links and they seem to be fine, but when I view the page all I get is a simple HTML drop down menu. I can't type directly into the box and there is no option to auto complete or add a new entry as at http://selectize.github.io/selectize.js/ (Single Item Select sub heading)
I have tried to copy the simplest example from the Selectize site but even that doesn't work. I can get a simple 'alert' pop up box to work so I know that jQuery is working. The file address selectize/selectize.min.js is also correct.
I would appreciate any help.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">
<link rel="stylesheet" href="selectize/normalize.css">
<link rel="stylesheet" href="selectize/styles.css">
<link rel="stylesheet" href="selectize/default.css" data-theme="default">
<!--[if IE 8]><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script><![endif]-->
<script type="text/javascript" src="selectize/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="selectize/selectize.min.js"></script>
<script type="text/javascript" src="selectize/myjquery.js"></script>
</head>
<body>
<section class="demo" id="demo-single-item-select">
<div class="header">
Single Item Select
</div>
<div class="sandbox">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="1">Chuck Testa</option>
<option value="4">Sage Cattabriga-Alosa</option>
<option value="3">Nikola Tesla</option>
</select>
</div>
<div class="description">
The most vanilla of examples.
</div>
</section>
</body>
</html>
myjQuery:
$(document).ready(function() {
//alert('Ahoy hoy');
$('#select-beast').selectize({
create: true,
sortField: 'text',
searchField: 'item',
create: function(input) {
return {
value: input,
text: input
}
}
});
});
<option value="">Select a person...</option>
remove value attribute or give it any name