Picture link that triggers drop-down select option without prior selection - javascript

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>

Related

How to add autcomplete to dropdown and then display content depending on user selection

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!

Tree-Style Multi select dropdown gets data from mysql

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.

How can I remove a tooltip element when an ul has the class disabled?

i have a question: how can i remove a tooltip element when i hover on an ul?
I have this html code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="col s12 offset-s4">
<script type="text/javascript">
$(document).ready (function() {
$('select').material_select();
$('select').material_select('destroy');
$('.tooltipped').tooltip({delay: 50});
});
</script>
<a id="tool-new" class="tooltipped" data-tooltip="Please select more than one category" data-position="right" data-delay="120">
<select class="and-or" id="And_Or" name="a_o[]">
<option value="4" selected="selected">And</option>
<option value="5">Or</option>
</select>
</a>
I just want to hover the tooltip when the selectbox is disabled. But when the selectbox is not disabled and works good so remove the element to make that the tooltip has dissapiar. MAY YOU HELP ME?? I'm working with materializecss, a really good framework to designs.

I have write jQuery on mouseover event of ul. Whenever mouse goes on ul it will hide the tooltip check the code
$(document).ready (function() {
$('select').material_select();
$('.tooltipped').tooltip({delay: 50});
});
$('select').material_select('destroy');
$('body').on("mouseover",'.dropdown-content', function(){
$("#tool-new").tooltip("hide");
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="col s12 offset-s4">
<a id="tool-new" class="tooltipped" data-tooltip="Please select more than one category" data-position="right" data-delay="120">
<select class="and-or" id="And_Or" name="a_o[]">
<option value="4" selected="selected">And</option>
<option value="5">Or</option>
</select>
</a>

How to display placeholder by default in kendo-ui

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>

Javascript getElementById doesn't select element

I'm having a problem with my java-script code. Something is wrong and i don't understand. I have the following code and i can not alert the variable.
Javascript (inside head tag)
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
And this in body tag
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
......
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
I choose an option but I can't alert this option. I don't know what is the problem here.

You are close... Give the following a try. It is preferred in Jquery to actually use the .on() method. You can listen for whatever event you want and then respond to it.
$("#cd-dropdown").on("click", function() {
alert($(this).val());
});
<section class="main">
<div class="fleft">
<p><br />Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
......
<div class="cont_btn">
<a data-type="submit" class="btn">send</a>
</div>

Your code shoud work, when you click the button the checkbox is already created, try the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
</script>
</head>
<body>
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
</body>
</html>

When I reproduced the error in a fiddle, it didn't work until i changed jQuery's load to No wrap - in <head>. I think your problem may be that you're loading jQuery in the body, and it's loaded after your other script, which somehow throws things off. Try moving it to your <head> tag, like this:
<head>
<script>
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.dropdown.js"></script>
<!-- etc -->
<title>Your Title</title>
</head>
<body>
<section class="main">
<div class="fleft">
<p></br>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
......
<div class="cont_btn">
<a onclick="read()" href="#" data-type="submit" class="btn">Send</a>
</div>

Categories

Resources